Lexical: Added clear formatting button

diff --git a/resources/js/wysiwyg/ui/defaults/button-definitions.ts b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
index 077bcae21f6641bf965c9b93de5a2abe8886ffc3..2e7cc6821e5494119bf0b3b1e6fdff8bd9bccf84 100644 (file)
--- 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 63ff8a05397cbedb0a5c42c6ced2beb0b8a8ae76..337266617396fb12524c9c81a4d90d4ebfbf284e 100644 (file)
--- 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