Tiptap RTE: Include Tiptap's default styles (#19805)

* Disables Tiptap's `injectCSS` option

This option would inject the default CSS styles into
the `window.document`, which are never applied to
the component's shadow DOM.

* Add Tiptap's default styles to "rte-content.css"

The `caret-color` rule (line 93) resolves issue #19791.

Author: leekelleher

src/Umbraco.Web.UI.Client/src/css/rte-content.css

@@ -19,3 +19,82 @@
 	padding: 10px;
 	border-radius: 5px;
 }
+
+/* Default Tiptap RTE styles.
+ * Copied from: https://github.com/ueberdosis/tiptap/blob/v2.11.7/packages/core/src/style.ts
+ * as we disable the `injectCSS` option in the Tiptap editor.
+ */
+
+.ProseMirror {
+	position: relative;
+}
+
+.ProseMirror {
+	word-wrap: break-word;
+	white-space: pre-wrap;
+	white-space: break-spaces;
+	-webkit-font-variant-ligatures: none;
+	font-variant-ligatures: none;
+	font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable='false'] {
+	white-space: normal;
+}
+
+.ProseMirror [contenteditable='false'] [contenteditable='true'] {
+	white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+	white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+	display: inline !important;
+	border: none !important;
+	margin: 0 !important;
+	width: 0 !important;
+	height: 0 !important;
+}
+
+.ProseMirror-gapcursor {
+	display: none;
+	pointer-events: none;
+	position: absolute;
+	margin: 0;
+}
+
+.ProseMirror-gapcursor:after {
+	content: '';
+	display: block;
+	position: absolute;
+	top: -2px;
+	width: 20px;
+	border-top: 1px solid black;
+	animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+	to {
+		visibility: hidden;
+	}
+}
+
+.ProseMirror-hideselection *::selection {
+	background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+	background: transparent;
+}
+
+.ProseMirror-hideselection * {
+	caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+	display: block;
+}
+
+/* End of default Tiptap RTE styles */

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -175,6 +175,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 			editable: !this.readonly,
 			extensions: tiptapExtensions,
 			content: this.#value,
+			injectCSS: false, // Prevents injecting CSS into `window.document`, as it never applies to the shadow DOM. [LK]
 			//enableContentCheck: true,
 			onBeforeCreate: ({ editor }) => {
 				this._extensions.forEach((ext) => ext.setEditor(editor));