UPDATE: Add clear formatting

Fixes #267

webapp/IronCalc/src/components/toolbar.tsx

@@ -23,6 +23,7 @@ import {
   PaintRoller,
   Percent,
   Redo2,
+  RemoveFormatting,
   Strikethrough,
   Tags,
   Type,
@@ -65,6 +66,7 @@ type ToolbarProperties = {
   onFillColorPicked: (hex: string) => void;
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
+  onClearFormatting: () => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -360,6 +362,19 @@ function Toolbar(properties: ToolbarProperties) {
         <Tags />
       </StyledButton>
 
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onClearFormatting();
+        }}
+        title={t("toolbar.clear_formatting")}
+      >
+        <RemoveFormatting />
+      </StyledButton>
+
       <ColorPicker
         color={properties.fontColor}
         onChange={(color): void => {

webapp/IronCalc/src/components/workbook.tsx

@@ -527,6 +527,20 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         onTextColorPicked={onTextColorPicked}
         onFillColorPicked={onFillColorPicked}
         onNumberFormatPicked={onNumberFormatPicked}
+        onClearFormatting={() => {
+          const {
+            sheet,
+            range: [rowStart, columnStart, rowEnd, columnEnd],
+          } = model.getSelectedView();
+          model.rangeClearFormatting(
+            sheet,
+            rowStart,
+            columnStart,
+            rowEnd,
+            columnEnd,
+          );
+          setRedrawId((id) => id + 1);
+        }}
         onBorderChanged={(border: BorderOptions): void => {
           const {
             sheet,

webapp/IronCalc/src/locale/en_us.json

@@ -3,6 +3,7 @@
     "redo": "Redo",
     "undo": "Undo",
     "copy_styles": "Copy styles",
+    "clear_formatting": "Clear formatting",
     "euro": "Format as Euro",
     "percentage": "Format as Percentage",
     "bold": "Bold",