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 import {$patchStyleText} from "@lexical/selection";
  16
  17 function buildFormatButton(label: string, format: TextFormatType, icon: string): EditorButtonDefinition {
  18     return {
  19         label: label,
  20         icon,
  21         action(context: EditorUiContext) {
  22             context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
  23         },
  24         isActive(selection: BaseSelection|null): boolean {
  25             return $selectionContainsTextFormat(selection, format);
  26         }
  27     };
  28 }
  29
  30 export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold', boldIcon);
  31 export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic', italicIcon);
  32 export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline', underlinedIcon);
  33 export const textColor: EditorBasicButtonDefinition = {label: 'Text color', icon: textColorIcon};
  34 export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color', icon: highlightIcon};
  35
  36 function colorAction(context: EditorUiContext, property: string, color: string): void {
  37     context.editor.update(() => {
  38         const selection = $getSelection();
  39         if (selection) {
  40             $patchStyleText(selection, {[property]: color || null});
  41         }
  42     });
  43 }
  44
  45 export const textColorAction = (color: string, context: EditorUiContext) => colorAction(context, 'color', color);
  46 export const highlightColorAction = (color: string, context: EditorUiContext) => colorAction(context, 'background-color', color);
  47
  48 export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough', strikethroughIcon);
  49 export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript', superscriptIcon);
  50 export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript', subscriptIcon);
  51 export const code: EditorButtonDefinition = buildFormatButton('Inline code', 'code', codeIcon);
  52 export const clearFormating: EditorButtonDefinition = {
  53     label: 'Clear formatting',
  54     icon: formatClearIcon,
  55     action(context: EditorUiContext) {
  56         context.editor.update(() => {
  57             const selection = $getSelection();
  58             for (const node of selection?.getNodes() || []) {
  59                 if ($isTextNode(node)) {
  60                     node.setFormat(0);
  61                     node.setStyle('');
  62                 }
  63             }
  64         });
  65     },
  66     isActive() {
  67         return false;
  68     }
  69 };