BookStack/resources/js/wysiwyg/ui/defaults/button-definitions.ts
Dan Brown dc1a40ea74
Lexical: Added ui container type
Structured UI logical to be fairly standard and mostly covered via
a base class that handles context and core dom work.
2024-05-29 20:38:31 +01:00

145 lines
5.2 KiB
TypeScript

import {EditorButtonDefinition} from "../framework/buttons";
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";
import {$isLinkNode, $toggleLink} from "@lexical/link";
export const undo: EditorButtonDefinition = {
label: 'Undo',
action(editor: LexicalEditor) {
editor.dispatchCommand(UNDO_COMMAND, undefined);
},
isActive(selection: BaseSelection|null): boolean {
return false;
}
}
export const redo: EditorButtonDefinition = {
label: 'Redo',
action(editor: LexicalEditor) {
editor.dispatchCommand(REDO_COMMAND, undefined);
},
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 infoCallout: EditorButtonDefinition = buildCalloutButton('info', 'Info');
export const dangerCallout: EditorButtonDefinition = buildCalloutButton('danger', 'Danger');
export const warningCallout: EditorButtonDefinition = buildCalloutButton('warning', 'Warning');
export const successCallout: 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 h2: EditorButtonDefinition = buildHeaderButton('h2', 'Large Header');
export const h3: EditorButtonDefinition = buildHeaderButton('h3', 'Medium Header');
export const h4: EditorButtonDefinition = buildHeaderButton('h4', 'Small Header');
export const h5: EditorButtonDefinition = buildHeaderButton('h5', 'Tiny Header');
export const blockquote: EditorButtonDefinition = {
label: 'Blockquote',
action(editor: LexicalEditor) {
toggleSelectionBlockNodeType(editor, $isQuoteNode, $createQuoteNode);
},
isActive(selection: BaseSelection|null): boolean {
return selectionContainsNodeType(selection, $isQuoteNode);
}
};
export const paragraph: 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 bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
// Todo - Text color
// Todo - Highlight color
export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough');
export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
// Todo - Clear formatting
export const link: EditorButtonDefinition = {
label: 'Insert/edit link',
action(editor: LexicalEditor) {
editor.update(() => {
$toggleLink('http://example.com');
})
},
isActive(selection: BaseSelection|null): boolean {
return selectionContainsNodeType(selection, $isLinkNode);
}
};