Lexical: Added clear formatting button

This commit is contained in:
Dan Brown 2024-06-12 14:24:50 +01:00
parent e889bc680b
commit a475cf68bf
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 24 additions and 3 deletions

View File

@ -2,7 +2,7 @@ import {EditorButtonDefinition} from "../framework/buttons";
import { import {
$createNodeSelection, $createNodeSelection,
$createParagraphNode, $getRoot, $getSelection, $insertNodes, $createParagraphNode, $getRoot, $getSelection, $insertNodes,
$isParagraphNode, $setSelection, $isParagraphNode, $isTextNode, $setSelection,
BaseSelection, ElementNode, FORMAT_TEXT_COMMAND, BaseSelection, ElementNode, FORMAT_TEXT_COMMAND,
LexicalNode, LexicalNode,
REDO_COMMAND, TextFormatType, REDO_COMMAND, TextFormatType,
@ -137,7 +137,22 @@ export const strikethrough: EditorButtonDefinition = buildFormatButton('Striketh
export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript'); export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript');
export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript'); export const subscript: EditorButtonDefinition = buildFormatButton('Subscript', 'subscript');
export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code'); export const code: EditorButtonDefinition = buildFormatButton('Inline Code', 'code');
// Todo - Clear formatting export const clearFormating: EditorButtonDefinition = {
label: 'Clear formatting',
action(context: EditorUiContext) {
context.editor.update(() => {
const selection = $getSelection();
for (const node of selection?.getNodes() || []) {
if ($isTextNode(node)) {
node.setFormat(0);
}
}
});
},
isActive() {
return false;
}
};
export const link: EditorButtonDefinition = { export const link: EditorButtonDefinition = {

View File

@ -1,6 +1,6 @@
import {EditorButton, FormatPreviewButton} from "./framework/buttons"; import {EditorButton, FormatPreviewButton} from "./framework/buttons";
import { import {
blockquote, bold, code, blockquote, bold, clearFormating, code,
dangerCallout, details, dangerCallout, details,
h2, h3, h4, h5, image, h2, h3, h4, h5, image,
infoCallout, italic, link, paragraph, infoCallout, italic, link, paragraph,
@ -15,9 +15,11 @@ import {el} from "../helpers";
export function getMainEditorFullToolbar(): EditorContainerUiElement { export function getMainEditorFullToolbar(): EditorContainerUiElement {
return new EditorSimpleClassContainer('editor-toolbar-main', [ return new EditorSimpleClassContainer('editor-toolbar-main', [
// History state
new EditorButton(undo), new EditorButton(undo),
new EditorButton(redo), new EditorButton(redo),
// Block formats
new EditorFormatMenu([ new EditorFormatMenu([
new FormatPreviewButton(el('h2'), h2), new FormatPreviewButton(el('h2'), h2),
new FormatPreviewButton(el('h3'), h3), new FormatPreviewButton(el('h3'), h3),
@ -31,6 +33,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout), new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
]), ]),
// Inline formats
new EditorButton(bold), new EditorButton(bold),
new EditorButton(italic), new EditorButton(italic),
new EditorButton(underline), new EditorButton(underline),
@ -38,11 +41,14 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
new EditorButton(superscript), new EditorButton(superscript),
new EditorButton(subscript), new EditorButton(subscript),
new EditorButton(code), new EditorButton(code),
new EditorButton(clearFormating),
// Insert types
new EditorButton(link), new EditorButton(link),
new EditorButton(image), new EditorButton(image),
new EditorButton(details), new EditorButton(details),
// Meta elements
new EditorButton(source), new EditorButton(source),
]); ]);
} }