2024-05-30 03:38:31 +08:00
|
|
|
import {EditorButtonDefinition} from "../framework/buttons";
|
2024-05-29 05:56:58 +08:00
|
|
|
import {
|
2024-06-01 23:49:47 +08:00
|
|
|
$createNodeSelection,
|
|
|
|
$createParagraphNode, $getSelection,
|
|
|
|
$isParagraphNode, $setSelection,
|
2024-05-29 05:56:58 +08:00
|
|
|
BaseSelection, FORMAT_TEXT_COMMAND,
|
|
|
|
LexicalNode,
|
|
|
|
REDO_COMMAND, TextFormatType,
|
|
|
|
UNDO_COMMAND
|
|
|
|
} from "lexical";
|
2024-06-01 23:49:47 +08:00
|
|
|
import {
|
|
|
|
getNodeFromSelection,
|
|
|
|
selectionContainsNodeType,
|
|
|
|
selectionContainsTextFormat,
|
|
|
|
toggleSelectionBlockNodeType
|
|
|
|
} from "../../helpers";
|
2024-05-30 03:38:31 +08:00
|
|
|
import {$createCalloutNode, $isCalloutNodeOfCategory, CalloutCategory} from "../../nodes/callout";
|
2024-05-29 05:56:58 +08:00
|
|
|
import {
|
|
|
|
$createHeadingNode,
|
|
|
|
$createQuoteNode,
|
|
|
|
$isHeadingNode,
|
|
|
|
$isQuoteNode,
|
|
|
|
HeadingNode,
|
|
|
|
HeadingTagType
|
|
|
|
} from "@lexical/rich-text";
|
2024-06-01 23:49:47 +08:00
|
|
|
import {$isLinkNode, $toggleLink, LinkNode} from "@lexical/link";
|
2024-05-30 23:50:55 +08:00
|
|
|
import {EditorUiContext} from "../framework/core";
|
2024-05-29 05:56:58 +08:00
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
export const undo: EditorButtonDefinition = {
|
2024-05-29 05:56:58 +08:00
|
|
|
label: 'Undo',
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
|
|
|
context.editor.dispatchCommand(UNDO_COMMAND, undefined);
|
2024-05-29 05:56:58 +08:00
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
export const redo: EditorButtonDefinition = {
|
2024-05-29 05:56:58 +08:00
|
|
|
label: 'Redo',
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
|
|
|
context.editor.dispatchCommand(REDO_COMMAND, undefined);
|
2024-05-29 05:56:58 +08:00
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function buildCalloutButton(category: CalloutCategory, name: string): EditorButtonDefinition {
|
|
|
|
return {
|
|
|
|
label: `${name} Callout`,
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
2024-05-29 05:56:58 +08:00
|
|
|
toggleSelectionBlockNodeType(
|
2024-05-30 23:50:55 +08:00
|
|
|
context.editor,
|
2024-05-29 05:56:58 +08:00
|
|
|
(node) => $isCalloutNodeOfCategory(node, category),
|
|
|
|
() => $createCalloutNode(category),
|
|
|
|
)
|
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return selectionContainsNodeType(selection, (node) => $isCalloutNodeOfCategory(node, category));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
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');
|
2024-05-29 05:56:58 +08:00
|
|
|
|
|
|
|
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,
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
2024-05-29 05:56:58 +08:00
|
|
|
toggleSelectionBlockNodeType(
|
2024-05-30 23:50:55 +08:00
|
|
|
context.editor,
|
2024-05-29 05:56:58 +08:00
|
|
|
(node) => isHeaderNodeOfTag(node, tag),
|
|
|
|
() => $createHeadingNode(tag),
|
|
|
|
)
|
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return selectionContainsNodeType(selection, (node) => isHeaderNodeOfTag(node, tag));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
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');
|
2024-05-29 05:56:58 +08:00
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
export const blockquote: EditorButtonDefinition = {
|
2024-05-29 05:56:58 +08:00
|
|
|
label: 'Blockquote',
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
|
|
|
toggleSelectionBlockNodeType(context.editor, $isQuoteNode, $createQuoteNode);
|
2024-05-29 05:56:58 +08:00
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return selectionContainsNodeType(selection, $isQuoteNode);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
export const paragraph: EditorButtonDefinition = {
|
2024-05-29 05:56:58 +08:00
|
|
|
label: 'Paragraph',
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
|
|
|
toggleSelectionBlockNodeType(context.editor, $isParagraphNode, $createParagraphNode);
|
2024-05-29 05:56:58 +08:00
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return selectionContainsNodeType(selection, $isParagraphNode);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function buildFormatButton(label: string, format: TextFormatType): EditorButtonDefinition {
|
|
|
|
return {
|
|
|
|
label: label,
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
|
|
|
context.editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
|
2024-05-29 05:56:58 +08:00
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return selectionContainsTextFormat(selection, format);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold');
|
|
|
|
export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic');
|
|
|
|
export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline');
|
2024-05-29 05:56:58 +08:00
|
|
|
// Todo - Text color
|
|
|
|
// Todo - Highlight color
|
2024-05-30 03:38:31 +08:00
|
|
|
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',
|
2024-05-30 23:50:55 +08:00
|
|
|
action(context: EditorUiContext) {
|
2024-06-01 23:49:47 +08:00
|
|
|
const linkModal = context.manager.createModal('link');
|
|
|
|
context.editor.getEditorState().read(() => {
|
|
|
|
const selection = $getSelection();
|
|
|
|
const selectedLink = getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
|
|
|
|
|
|
|
|
let formDefaults = {};
|
|
|
|
if (selectedLink) {
|
|
|
|
formDefaults = {
|
|
|
|
url: selectedLink.getURL(),
|
|
|
|
text: selectedLink.getTextContent(),
|
|
|
|
title: selectedLink.getTitle(),
|
|
|
|
target: selectedLink.getTarget(),
|
|
|
|
}
|
|
|
|
|
|
|
|
context.editor.update(() => {
|
|
|
|
const selection = $createNodeSelection();
|
|
|
|
selection.add(selectedLink.getKey());
|
|
|
|
$setSelection(selection);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
linkModal.show(formDefaults);
|
|
|
|
});
|
2024-05-30 03:38:31 +08:00
|
|
|
},
|
|
|
|
isActive(selection: BaseSelection|null): boolean {
|
|
|
|
return selectionContainsNodeType(selection, $isLinkNode);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|