read an write value

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

@@ -6,6 +6,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 
 import './tiptap-fixed-menu.element.js';
 import { Editor, StarterKit } from '@umbraco-cms/backoffice/external/tiptap';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-input-tiptap')
 export class UmbInputTiptapElement extends UUIFormControlMixin(UmbLitElement, '') {
@@ -22,23 +23,7 @@ export class UmbInputTiptapElement extends UUIFormControlMixin(UmbLitElement, ''
 
 		if (!editor) return;
 
-		const json =
-			this.value && typeof this.value === 'string'
-				? JSON.parse(this.value)
-				: {
-						type: 'doc',
-						content: [
-							{
-								type: 'paragraph',
-								content: [
-									{
-										type: 'text',
-										text: 'Hello Umbraco',
-									},
-								],
-							},
-						],
-					};
+		const json = this.value && typeof this.value === 'string' ? JSON.parse(this.value) : this.value;
 
 		// TODO: Try Disable css inject to remove prosemirror css
 		this._editor = new Editor({
@@ -48,7 +33,7 @@ export class UmbInputTiptapElement extends UUIFormControlMixin(UmbLitElement, ''
 			onUpdate: ({ editor }) => {
 				const json = editor.getJSON();
 				this.value = JSON.stringify(json);
-				console.log('json', json);
+				this.dispatchEvent(new UmbChangeEvent());
 			},
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts

@@ -1,10 +1,12 @@
+import type UmbInputTiptapElement from '../../components/input-tiptap/input-tiptap.element.js';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import {
+	UmbPropertyValueChangeEvent,
+	type UmbPropertyEditorConfigCollection,
+} from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
-import '../../components/input-tiptap/input-tiptap.element.js';
-
 // Look at Tiny for correct types
 export interface UmbRichTextEditorValueType {
 	markup?: string;
@@ -22,10 +24,10 @@ export class UmbPropertyEditorUITiptapElement extends UmbLitElement implements U
 	}
 
 	@property({ attribute: false })
-	public set value(value: UmbRichTextEditorValueType) {
+	public set value(value: string) {
 		this._value = value;
 	}
-	public get value(): UmbRichTextEditorValueType {
+	public get value(): string {
 		return this._value;
 	}
 
@@ -33,10 +35,19 @@ export class UmbPropertyEditorUITiptapElement extends UmbLitElement implements U
 	_config?: UmbPropertyEditorConfigCollection;
 
 	@state()
-	private _value: UmbRichTextEditorValueType = {};
+	private _value: string = '';
+
+	#onChange(event: CustomEvent & { target: UmbInputTiptapElement }) {
+		const value = event.target.value as string;
+		this._value = value;
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
 
 	override render() {
-		return html`<umb-input-tiptap></umb-input-tiptap>`;
+		return html`<umb-input-tiptap
+			.value=${this.value}
+			@change=${this.#onChange}
+			.configuration=${this._config}></umb-input-tiptap>`;
 	}
 }