BookStack/resources/js/wysiwyg/ui/buttons.ts

import {EditorButtonDefinition} from "./editor-button";
import {
    $createParagraphNode,
    $isParagraphNode,
    BaseSelection, FORMAT_TEXT_COMMAND,
    LexicalEditor,
    LexicalNode,
    REDO_COMMAND, TextFormatType,
    UNDO_COMMAND
} from "lexical";
import {selectionContainsNodeType, selectionContainsTextFormat, toggleSelectionBlockNodeType} from "../helpers";
import {$createCalloutNode, $isCalloutNodeOfCategory, CalloutCategory} from "../nodes/callout";
import {
    $createHeadingNode,
    $createQuoteNode,
    $isHeadingNode,
    $isQuoteNode,
    HeadingNode,
    HeadingTagType
} from "@lexical/rich-text";

export const undoButton: EditorButtonDefinition = {
    label: 'Undo',
    action(editor: LexicalEditor) {
        editor.dispatchCommand(UNDO_COMMAND);
    },
    isActive(selection: BaseSelection|null): boolean {
        return false;
    }
}

export const redoButton: EditorButtonDefinition = {
    label: 'Redo',
    action(editor: LexicalEditor) {
        editor.dispatchCommand(REDO_COMMAND);
    },
    isActive(selection: BaseSelection|null): boolean {
        return false;
    }
}

function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition {
    return {
        label: `${name} Callout`,
        action(editor: LexicalEditor) {
            toggleSelectionBlockNodeType(
                editor,
                (node) => $isCalloutNodeOfCategory(node, category),
                () => $createCalloutNode(category),
            )
        },
        isActive(selection: BaseSelection|null): boolean {
            return selectionContainsNodeType(selection, (node) => $isCalloutNodeOfCategory(node, category));
        }
    };
}

export const infoCalloutButton: EditorButtonDefinition = buildCalloutButton('info', 'Info');
export const dangerCalloutButton: EditorButtonDefinition = buildCalloutButton('danger', 'Danger');
export const warningCalloutButton: EditorButtonDefinition = buildCalloutButton('warning', 'Warning');
export const successCalloutButton: EditorButtonDefinition = buildCalloutButton('success', 'Success');

const isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
      return $isHeadingNode(node) && (node as HeadingNode).getTag() === tag;
};

function buildHeaderButton(tag: HeadingTagType, name: string): EditorButtonDefinition {
    return {
        label: name,
        action(editor: LexicalEditor) {
            toggleSelectionBlockNodeType(
                editor,
                (node) => isHeaderNodeOfTag(node, tag),
                () => $createHeadingNode(tag),
            )
        },
        isActive(selection: BaseSelection|null): boolean {
            return selectionContainsNodeType(selection, (node) => isHeaderNodeOfTag(node, tag));
        }
    };
}

export const h2Button: EditorButtonDefinition = buildHeaderButton('h2', 'Large Header');
export const h3Button: EditorButtonDefinition = buildHeaderButton('h3', 'Medium Header');
export const h4Button: EditorButtonDefinition = buildHeaderButton('h4', 'Small Header');
export const h5Button: EditorButtonDefinition = buildHeaderButton('h5', 'Tiny Header');

export const blockquoteButton: EditorButtonDefinition = {
    label: 'Blockquote',
    action(editor: LexicalEditor) {
        toggleSelectionBlockNodeType(editor, $isQuoteNode, $createQuoteNode);
    },
    isActive(selection: BaseSelection|null): boolean {
        return selectionContainsNodeType(selection, $isQuoteNode);
    }
};

export const paragraphButton: EditorButtonDefinition = {
    label: 'Paragraph',
    action(editor: LexicalEditor) {
        toggleSelectionBlockNodeType(editor, $isParagraphNode, $createParagraphNode);
    },
    isActive(selection: BaseSelection|null): boolean {
        return selectionContainsNodeType(selection, $isParagraphNode);
    }
}

function buildFormatButton(label: string, format: TextFormatType): EditorButtonDefinition {
    return {
        label: label,
        action(editor: LexicalEditor) {
            editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
        },
        isActive(selection: BaseSelection|null): boolean {
            return selectionContainsTextFormat(selection, format);
        }
    };
}

export const boldButton: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
export const italicButton: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
export const underlineButton: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
// Todo - Text color
// Todo - Highlight color
export const strikethroughButton: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough');
export const superscriptButton: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
export const subscriptButton: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
export const codeButton: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
// Todo - Clear formatting