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(); + } +}