mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-12-11 20:54:38 +08:00
56 lines
2.7 KiB
TypeScript
56 lines
2.7 KiB
TypeScript
import {$getSelection, $isTextNode, BaseSelection, FORMAT_TEXT_COMMAND, TextFormatType} from "lexical";
|
|
import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../../framework/buttons";
|
|
import {EditorUiContext} from "../../framework/core";
|
|
import {$selectionContainsTextFormat} from "../../../helpers";
|
|
import boldIcon from "@icons/editor/bold.svg";
|
|
import italicIcon from "@icons/editor/italic.svg";
|
|
import underlinedIcon from "@icons/editor/underlined.svg";
|
|
import textColorIcon from "@icons/editor/text-color.svg";
|
|
import highlightIcon from "@icons/editor/highlighter.svg";
|
|
import strikethroughIcon from "@icons/editor/strikethrough.svg";
|
|
import superscriptIcon from "@icons/editor/superscript.svg";
|
|
import subscriptIcon from "@icons/editor/subscript.svg";
|
|
import codeIcon from "@icons/editor/code.svg";
|
|
import formatClearIcon from "@icons/editor/format-clear.svg";
|
|
|
|
function buildFormatButton(label: string, format: TextFormatType, icon: string): EditorButtonDefinition {
|
|
return {
|
|
label: label,
|
|
icon,
|
|
action(context: EditorUiContext) {
|
|
context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
|
|
},
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
return $selectionContainsTextFormat(selection, format);
|
|
}
|
|
};
|
|
}
|
|
|
|
export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold', boldIcon);
|
|
export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic', italicIcon);
|
|
export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline', underlinedIcon);
|
|
export const textColor: EditorBasicButtonDefinition = {label: 'Text color', icon: textColorIcon};
|
|
export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color', icon: highlightIcon};
|
|
|
|
export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough', strikethroughIcon);
|
|
export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript', superscriptIcon);
|
|
export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript', subscriptIcon);
|
|
export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code', codeIcon);
|
|
export const clearFormating: EditorButtonDefinition = {
|
|
label: 'Clear formatting',
|
|
icon: formatClearIcon,
|
|
action(context: EditorUiContext) {
|
|
context.editor.update(() => {
|
|
const selection = $getSelection();
|
|
for (const node of selection?.getNodes() || []) {
|
|
if ($isTextNode(node)) {
|
|
node.setFormat(0);
|
|
node.setStyle('');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
isActive() {
|
|
return false;
|
|
}
|
|
}; |