diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
index cc6923a5d9..d358487927 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
@@ -366,6 +366,10 @@
"name": "icon-circuits",
"file": "circuit-board.svg"
},
+ {
+ "name": "icon-clear-formatting",
+ "file": "remove-formatting.svg"
+ },
{
"name": "icon-client",
"file": "user.svg",
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
index 6edd8ec784..8855310df5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
@@ -355,6 +355,10 @@ name: "icon-circuits",
path: () => import("./icons/icon-circuits.js"),
},{
+name: "icon-clear-formatting",
+
+path: () => import("./icons/icon-clear-formatting.js"),
+},{
name: "icon-client",
legacy: true,
path: () => import("./icons/icon-client.js"),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-clear-formatting.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-clear-formatting.ts
new file mode 100644
index 0000000000..09fbab564a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-clear-formatting.ts
@@ -0,0 +1,18 @@
+export default `
+
+`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
index 8f27df5139..719793c65f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
@@ -193,6 +193,18 @@ const toolbarExtensions: Array = [
label: 'Strike',
},
},
+ {
+ type: 'tiptapToolbarExtension',
+ kind: 'button',
+ alias: 'Umb.Tiptap.Toolbar.ClearFormatting',
+ name: 'Clear Formatting Tiptap Extension',
+ api: () => import('./toolbar/clear-formatting.extension.js'),
+ meta: {
+ alias: 'clear-formatting',
+ icon: 'icon-clear-formatting',
+ label: 'Clear Formatting',
+ },
+ },
{
type: 'tiptapToolbarExtension',
kind: 'button',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/clear-formatting.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/clear-formatting.extension.ts
new file mode 100644
index 0000000000..159e932a14
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/clear-formatting.extension.ts
@@ -0,0 +1,8 @@
+import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarClearFormattingExtensionApi extends UmbTiptapToolbarElementApiBase {
+ override execute(editor?: Editor) {
+ editor?.chain().focus().unsetAllMarks().run();
+ }
+}