From fb3971157131d206de7e3d9eb1fa7fac24c62b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 22 Apr 2025 09:43:12 +0200
Subject: [PATCH] give tiptap a invalid border color to fit with other inputs
 in invalid state (#19090)

---
 .../src/packages/rte/components/rte-base.element.ts       | 2 +-
 .../components/input-tiptap/input-tiptap.element.ts       | 4 ++--
 .../tiptap/property-editor-ui-tiptap.element.ts           | 8 +++++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts
index 801b55bbd9..bd7d09a472 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts
@@ -242,7 +242,7 @@ export abstract class UmbPropertyEditorUiRteElementBase
 
 				context.setValue(super.value);
 			},
-			'motherObserver',
+			'blockManagerObserver',
 		);
 	}
 
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 1057f9099c..2d5faddb1a 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
@@ -237,7 +237,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				justify-content: center;
 			}
 
-			:host(:not([pristine]):invalid),
+			:host(:invalid:not([pristine])),
 			/* polyfill support */
 			:host(:not([pristine])[internals-invalid]) {
 				--umb-tiptap-edge-border-color: var(--uui-color-invalid);
@@ -250,7 +250,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				display: flex;
 				overflow: auto;
 				border-radius: var(--uui-border-radius);
-				border: 1px solid var(--uui-color-border);
+				border: 1px solid var(--umb-tiptap-edge-border-color, var(--uui-color-border));
 				padding: 1rem;
 				box-sizing: border-box;
 				height: 100%;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts
index fb28b8a1ae..63675b095d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts
@@ -1,6 +1,6 @@
 import type { UmbInputTiptapElement } from '../../components/input-tiptap/input-tiptap.element.js';
 import { UmbPropertyEditorUiRteElementBase } from '@umbraco-cms/backoffice/rte';
-import { customElement, html, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 
 import '../../components/input-tiptap/input-tiptap.element.js';
 
@@ -74,6 +74,12 @@ export class UmbPropertyEditorUiTiptapElement extends UmbPropertyEditorUiRteElem
 				@change=${this.#onChange}></umb-input-tiptap>
 		`;
 	}
+
+	static override styles = css`
+		:host(:invalid:not([pristine])) umb-input-tiptap {
+			--umb-tiptap-edge-border-color: var(--uui-color-invalid);
+		}
+	`;
 }
 
 export { UmbPropertyEditorUiTiptapElement as element };