diff --git a/resources/js/wysiwyg/ui/defaults/button-definitions.ts b/resources/js/wysiwyg/ui/defaults/button-definitions.ts index 077bcae21..2e7cc6821 100644 --- a/resources/js/wysiwyg/ui/defaults/button-definitions.ts +++ b/resources/js/wysiwyg/ui/defaults/button-definitions.ts @@ -2,7 +2,7 @@ import {EditorButtonDefinition} from "../framework/buttons"; import { $createNodeSelection, $createParagraphNode, $getRoot, $getSelection, $insertNodes, - $isParagraphNode, $setSelection, + $isParagraphNode, $isTextNode, $setSelection, BaseSelection, ElementNode, FORMAT_TEXT_COMMAND, LexicalNode, REDO_COMMAND, TextFormatType, @@ -137,7 +137,22 @@ export const strikethrough: EditorButtonDefinition = buildFormatButton('Striketh 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 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 = { diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts index 63ff8a053..337266617 100644 --- a/resources/js/wysiwyg/ui/toolbars.ts +++ b/resources/js/wysiwyg/ui/toolbars.ts @@ -1,6 +1,6 @@ import {EditorButton, FormatPreviewButton} from "./framework/buttons"; import { - blockquote, bold, code, + blockquote, bold, clearFormating, code, dangerCallout, details, h2, h3, h4, h5, image, infoCallout, italic, link, paragraph, @@ -15,9 +15,11 @@ import {el} from "../helpers"; export function getMainEditorFullToolbar(): EditorContainerUiElement { return new EditorSimpleClassContainer('editor-toolbar-main', [ + // History state new EditorButton(undo), new EditorButton(redo), + // Block formats new EditorFormatMenu([ new FormatPreviewButton(el('h2'), h2), new FormatPreviewButton(el('h3'), h3), @@ -31,6 +33,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement { new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout), ]), + // Inline formats new EditorButton(bold), new EditorButton(italic), new EditorButton(underline), @@ -38,11 +41,14 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement { new EditorButton(superscript), new EditorButton(subscript), new EditorButton(code), + new EditorButton(clearFormating), + // Insert types new EditorButton(link), new EditorButton(image), new EditorButton(details), + // Meta elements new EditorButton(source), ]); } \ No newline at end of file