From 79de4e3871f7efbe96a9093313e9040d12d922fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=BCger?=
 <93977820+OskarKruger@users.noreply.github.com>
Date: Mon, 22 Sep 2025 12:35:52 +0200
Subject: [PATCH] Tiptap RTE: Adds hover and focus border input states (#20172)

* added hovering and focus border to RTE

* fix main to OG

* fix to main again

* I'm going to cry

* added hovering and focus border to RTE

* fix indentation

* Refactored to set `--umb-tiptap-edge-border-color` variable

so that the toolbar and statusbar can pick up the state changes.

* Applies `transition` to the toolbar/statusbar components

---------

Co-authored-by: Oskar kruger <obk@umbraco.dk>
Co-authored-by: leekelleher <leekelleher@gmail.com>
---
 .../input-tiptap/input-tiptap.element.ts          | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
index 2e898bf7e8..0e6132cefc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
@@ -266,6 +266,15 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				max-width: var(--umb-rte-max-width, 100%);
 			}
 
+			:host(:hover) {
+				--umb-tiptap-edge-border-color: var(--uui-color-border-standalone);
+			}
+
+			:host(:focus),
+			:host(:focus-within) {
+				--umb-tiptap-edge-border-color: var(--uui-color-border-emphasis);
+			}
+
 			:host([readonly]) {
 				pointer-events: none;
 
@@ -335,6 +344,12 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				}
 			}
 
+			#editor,
+			umb-tiptap-toolbar,
+			umb-tiptap-statusbar {
+				transition: border-color 120ms ease-out;
+			}
+
 			umb-tiptap-toolbar + #editor {
 				border-top: 0;
 				border-top-left-radius: 0;