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

   1 import {$getSelection, $isTextNode, BaseSelection, FORMAT_TEXT_COMMAND, TextFormatType} from "lexical";
   2 import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../../framework/buttons";
   3 import {EditorUiContext} from "../../framework/core";
   4 import boldIcon from "@icons/editor/bold.svg";
   5 import italicIcon from "@icons/editor/italic.svg";
   6 import underlinedIcon from "@icons/editor/underlined.svg";
   7 import textColorIcon from "@icons/editor/text-color.svg";
   8 import highlightIcon from "@icons/editor/highlighter.svg";
   9 import strikethroughIcon from "@icons/editor/strikethrough.svg";
  10 import superscriptIcon from "@icons/editor/superscript.svg";
  11 import subscriptIcon from "@icons/editor/subscript.svg";
  12 import codeIcon from "@icons/editor/code.svg";
  13 import formatClearIcon from "@icons/editor/format-clear.svg";
  14 import {$selectionContainsTextFormat} from "../../../utils/selection";
  15
  16 function buildFormatButton(label: string, format: TextFormatType, icon: string): EditorButtonDefinition {
  17     return {
  18         label: label,
  19         icon,
  20         action(context: EditorUiContext) {
  21             context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
  22         },
  23         isActive(selection: BaseSelection|null): boolean {
  24             return $selectionContainsTextFormat(selection, format);
  25         }
  26     };
  27 }
  28
  29 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold', boldIcon);
  30 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic', italicIcon);
  31 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline', underlinedIcon);
  32 export const textColor: EditorBasicButtonDefinition = {label: 'Text color', icon: textColorIcon};
  33 export const highlightColor: EditorBasicButtonDefinition = {label: 'Background color', icon: highlightIcon};
  34
  35 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough', strikethroughIcon);
  36 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript', superscriptIcon);
  37 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript', subscriptIcon);
  38 export const code: EditorButtonDefinition = buildFormatButton('Inline code', 'code', codeIcon);
  39 export const clearFormating: EditorButtonDefinition = {
  40     label: 'Clear formatting',
  41     icon: formatClearIcon,
  42     action(context: EditorUiContext) {
  43         context.editor.update(() => {
  44             const selection = $getSelection();
  45             for (const node of selection?.getNodes() || []) {
  46                 if ($isTextNode(node)) {
  47                     node.setFormat(0);
  48                     node.setStyle('');
  49                 }
  50             }
  51         });
  52     },
  53     isActive() {
  54         return false;
  55     }
  56 };