From a475cf68bf7670c4cbf76758f5ead4c129586f13 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 12 Jun 2024 14:24:50 +0100
Subject: [PATCH] Lexical: Added clear formatting button

---
 .../wysiwyg/ui/defaults/button-definitions.ts | 19 +++++++++++++++++--
 resources/js/wysiwyg/ui/toolbars.ts           |  8 +++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

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