the other workspace wip

src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet.data.ts

@@ -5,6 +5,7 @@ import {
 	FileSystemTreeItemPresentationModel,
 	PagedFileSystemTreeItemPresentationModel,
 	PagedStylesheetOverviewResponseModel,
+	RichTextRuleModel,
 	StylesheetResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 
@@ -142,6 +143,26 @@ class UmbStylesheetData extends UmbEntityData<StylesheetDBItem> {
 		return this.data.find((item) => item.path === path && item.isFolder === true);
 	}
 
+	getRules(path: string): Array<RichTextRuleModel> {
+		return [
+			{
+				"name": "bjjh",
+				"selector": "h1",
+				"styles": "color: blue;"
+			},
+			{
+				"name": "comeone",
+				"selector": "h1",
+				"styles": "color: blue;"
+			},
+			{
+				"name": "lol",
+				"selector": "h1",
+				"styles": "color: blue;"
+			}
+		]
+	}
+
 	insertFolder(item: CreateTextFileViewModelBaseModel) {
 		const newItem: StylesheetDBItem = {
 			...item,

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts

@@ -1,6 +1,12 @@
+import { Observable } from 'rxjs';
+import { StylesheetDetails } from '../index.js';
 import { UmbStylesheetTreeStore, UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN } from './stylesheet.tree.store.js';
 import { UmbStylesheetTreeServerDataSource } from './sources/stylesheet.tree.server.data.js';
 import { UmbStylesheetServerDataSource } from './sources/stylesheet.server.data.js';
+import {
+	StylesheetGetFolderResponse,
+	UmbStylesheetFolderServerDataSource,
+} from './sources/stylesheet.folder.server.data.js';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import {
@@ -18,7 +24,7 @@ import {
 	ExtractRichTextStylesheetRulesResponseModel,
 	FileSystemTreeItemPresentationModel,
 	FolderModelBaseModel,
-	FolderReponseModel,
+	FolderResponseModel,
 	InterpolateRichTextStylesheetRequestModel,
 	InterpolateRichTextStylesheetResponseModel,
 	ProblemDetails,
@@ -28,12 +34,6 @@ import {
 	UpdateTextFileViewModelBaseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbTreeRootFileSystemModel } from '@umbraco-cms/backoffice/tree';
-import { StylesheetDetails } from '../index.js';
-import { Observable } from 'rxjs';
-import {
-	StylesheetGetFolderResponse,
-	UmbStylesheetFolderServerDataSource,
-} from './sources/stylesheet.folder.server.data.js';
 
 export class UmbStylesheetRepository
 	implements
@@ -65,8 +65,8 @@ export class UmbStylesheetRepository
 
 	createFolderScaffold(
 		parentId: string | null
-	): Promise<{ data?: FolderReponseModel | undefined; error?: ProblemDetails | undefined }> {
-		const data: FolderReponseModel = {
+	): Promise<{ data?: FolderResponseModel | undefined; error?: ProblemDetails | undefined }> {
+		const data: FolderResponseModel = {
 			name: '',
 			parentId,
 		};

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts

@@ -4,9 +4,11 @@ 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 { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
+import { RichTextStylesheetRulesResponseModel } 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);
 	data = this.#data.asObservable();
 	name = createObservablePart(this.#data, (data) => data?.name);
 	content = createObservablePart(this.#data, (data) => data?.content);
@@ -50,11 +52,16 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 	}
 
 	async load(path: string) {
-		const { data } = await this.repository.requestById(path);
+		const [ {data}, rules ] = await Promise.all([this.repository.requestById(path), this.repository.getStylesheetRules(path)]);
+
 		if (data) {
 			this.setIsNew(false);
 			this.#data.update(data);
 		}
+
+		if (rules.data) {
+			this.#rules.update(rules.data);
+		}
 	}
 
 	public async save() {

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts

@@ -1,15 +1,136 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query, state } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
+import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
+import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
+import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-stylesheet-workspace-view-rich-text-editor')
 export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitElement {
-	render() {
-		return html`umb-stylesheet-workspace-view-RICH_TEXT-editor`;
+
+	@state()
+	private _content?: string | null = '';
+
+	@state()
+	private _path?: string | null = '';
+
+	@state()
+	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;"
+		}
+	];
+
+	#stylesheetWorkspaceContext?: UmbStylesheetWorkspaceContext;
+	private _modalContext?: UmbModalManagerContext;
+
+	#isNew = false;
+
+	constructor() {
+		super();
+
+		//tODO: should this be called something else here?
+		this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#stylesheetWorkspaceContext = workspaceContext as UmbStylesheetWorkspaceContext;
+
+			this.observe(this.#stylesheetWorkspaceContext.content, (content) => {
+				this._content = content;
+			});
+
+			this.observe(this.#stylesheetWorkspaceContext.path, (path) => {
+				this._path = path;
+			});
+
+			this.observe(this.#stylesheetWorkspaceContext.isNew, (isNew) => {
+				this.#isNew = !!isNew;
+			});
+
+			this.observe(this.#stylesheetWorkspaceContext.isCodeEditorReady, (isReady) => {
+				this._ready = isReady;
+			});
+		});
 	}
 
-	static styles = [UUITextStyles, css``];
+	renderRule(rule: RichTextRuleModel) {
+		return html`<div class="rule">
+			<div class="rule-name"><uui-icon name="umb:move"></uui-icon>${rule.name}</div>
+			<div class="rule-actions"><uui-button label="Edit" look="secondary">Edit</uui-button><uui-button label="Remove" look="secondary" color="danger">Remove</uui-button></div>
+		</div>`;
+	}
+	render() {
+		return html` <uui-box headline="Rich text editor styles">
+
+		<div id="box-row">
+		
+		<div id="description"><p>Define the styles that should be available in the rich text editor for this stylesheet</p></div>
+		<div id="rules">
+			${this._rules?.map((rule) => this.renderRule(rule))}
+		</div>
+		</div>
+
+		</uui-box>`;
+	}
+
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+			}
+
+			#box-row {
+				display: flex;
+				gap: var(--uui-size-layout-1);
+			}
+
+			#description {
+				flex: 0 0 250px
+			}
+
+			#rules {
+				flex: 1 1 auto;
+				max-width: 600px;
+			}
+
+			.rule {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+				padding: var(--uui-size-2);
+				align-items: center;
+				border-radius: var(--uui-size-border-radius);
+				background-color: var(--uui-color-surface-alt);
+				margin-bottom: var(--uui-size-space-4);
+			}
+
+			uui-box {
+				margin: var(--uui-size-layout-1);
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
+			}
+
+
+		`,
+	];
 }
 
 export default UmbStylesheetWorkspaceViewRichTextEditorElement;