Tiptap RTE: Adds a umbIgnorePasswordManagers Lit directive (closes #20897)

src/Umbraco.Web.UI.Client/src/external/lit/index.ts

@@ -1,6 +1,7 @@
 export * from 'lit';
 export * from 'lit/decorators.js';
-export { directive, AsyncDirective, type PartInfo } from 'lit/async-directive.js';
+export { directive, AsyncDirective, Directive, PartType } from 'lit/async-directive.js';
+export type { PartInfo } from 'lit/async-directive.js';
 export * from 'lit/directives/class-map.js';
 export * from 'lit/directives/if-defined.js';
 export * from 'lit/directives/map.js';

src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/ignore-password-managers.lit-directive.ts

@@ -0,0 +1,38 @@
+import { directive, Directive, noChange, nothing, PartType } from '@umbraco-cms/backoffice/external/lit';
+import type { ElementPart, PartInfo } from '@umbraco-cms/backoffice/external/lit';
+
+/**
+ * @description The directive applies attributes to ignore password managers on the given element.
+ */
+class UmbIgnorePasswordManagersDirective extends Directive {
+	#attributes = [
+		{ name: 'data-1p-ignore', value: '' }, // 1Password
+		{ name: 'data-bwignore', value: '' }, // Bitwarden
+		{ name: 'data-form-type', value: 'other' }, // Dashlane
+		{ name: 'data-lpignore', value: 'true' }, // LastPass
+	];
+
+	constructor(partInfo: PartInfo) {
+		super(partInfo);
+		if (partInfo.type != PartType.ELEMENT) {
+			throw new Error('The `umbIgnorePasswordManagers` directive can only be used in element parts');
+		}
+	}
+
+	override render() {
+		return nothing;
+	}
+
+	override update(part: ElementPart) {
+		this.#attributes.forEach((attr) => {
+			part.element.setAttribute(attr.name, attr.value);
+		});
+		return noChange;
+	}
+}
+
+/**
+ * @description A Lit directive which applies password manager ignore attributes to an element.
+ * @example html`<div ${umbIgnorePasswordManagers()}></div>`
+ */
+export const umbIgnorePasswordManagers = directive(UmbIgnorePasswordManagersDirective);

src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/index.ts

@@ -1,2 +1,3 @@
-export * from './focus.lit-directive.js';
 export * from './destroy.lit-directive.js';
+export * from './focus.lit-directive.js';
+export * from './ignore-password-managers.lit-directive.js';

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

@@ -16,7 +16,7 @@ import {
 import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbIgnorePasswordManagers, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -204,7 +204,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 		return html`
 			${when(loading, () => html`<div id="loader"><uui-loader></uui-loader></div>`)}
 			${when(!loading, () => html`${this.#renderStyles()}${this.#renderToolbar()}`)}
-			<div id="editor" data-mark="input:tiptap-rte" ?data-loaded=${!loading}></div>
+			<div id="editor" data-mark="input:tiptap-rte" ?data-loaded=${!loading} ${umbIgnorePasswordManagers()}></div>
 			${when(!loading, () => this.#renderStatusbar())}
 		`;
 	}