From 359ad583c7c790f49e9727c2dfbd9fa30df3b503 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Mon, 21 Aug 2023 11:36:08 +0200
Subject: [PATCH] add rules observable

---
 .../workspace/stylesheet-workspace.context.ts | 16 +++++++------
 ...workspace-view-rich-text-editor.element.ts | 23 +++++--------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
index 3eb68868d9..08ef653320 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
@@ -2,17 +2,15 @@ import { UmbStylesheetRepository } from '../repository/stylesheet.repository.js'
 import { StylesheetDetails } from '../index.js';
 import { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UmbBooleanState, UmbObjectState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbBooleanState, UmbObjectState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
 import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
-import {
-	RichTextStylesheetRulesResponseModel,
-	UpdateStylesheetRequestModel,
-} from '@umbraco-cms/backoffice/backend-api';
+import { RichTextRuleModel, UpdateStylesheetRequestModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStylesheetRepository, StylesheetDetails> {
 	#data = new UmbObjectState<StylesheetDetails | undefined>(undefined);
-	#rules = new UmbObjectState<RichTextStylesheetRulesResponseModel | undefined>(undefined);
+	#rules = new UmbArrayState<RichTextRuleModel>([]);
 	data = this.#data.asObservable();
+	rules = this.#rules.asObservable();
 	name = createObservablePart(this.#data, (data) => data?.name);
 	content = createObservablePart(this.#data, (data) => data?.content);
 	path = createObservablePart(this.#data, (data) => data?.path);
@@ -46,6 +44,10 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 		return this.#data.getValue();
 	}
 
+	getRules() {
+		return this.#rules.getValue();
+	}
+
 	setName(value: string) {
 		this.#data.next({ ...this.#data.value, name: value });
 	}
@@ -66,7 +68,7 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 		}
 
 		if (rules.data) {
-			this.#rules.update(rules.data);
+			this.#rules.next(rules.data.rules ?? []);
 		}
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
index d84c269358..120cdd7228 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
@@ -33,23 +33,7 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 	private _ready?: boolean = false;
 
 	@state()
-	private _rules?: RichTextRuleModel[] = [
-		{
-			name: 'bjjh',
-			selector: 'h1',
-			styles: 'color: blue;',
-		},
-		{
-			name: 'comeone',
-			selector: 'h1',
-			styles: 'color: blue;',
-		},
-		{
-			name: 'lol',
-			selector: 'h1',
-			styles: 'color: blue;',
-		},
-	];
+	private _rules?: RichTextRuleModel[] = [];
 
 	#stylesheetWorkspaceContext?: UmbStylesheetWorkspaceContext;
 	private _modalContext?: UmbModalManagerContext;
@@ -79,6 +63,11 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 			this.observe(this.#stylesheetWorkspaceContext.isCodeEditorReady, (isReady) => {
 				this._ready = isReady;
 			});
+
+			this.observe(this.#stylesheetWorkspaceContext.rules, (rules) => {
+				debugger;
+				this._rules = rules;
+			});
 		});
 
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {