From 7ccb4779c133697f974826bb86c013b2abb56ba9 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Tue, 30 May 2023 10:32:46 +0200
Subject: [PATCH] fix insert section modal

---
 .../insert-section-input.element.ts           | 13 ++++++++++++
 .../insert-section-modal.element.ts           | 21 +++++++++++++------
 .../workspace/template-workspace.element.ts   |  5 -----
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
index 8e488c45ba..96f4d400e6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
@@ -22,6 +22,19 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement {
 	@query('uui-checkbox')
 	checkbox?: HTMLFormElement;
 
+	get snippet() {
+		if (!this.snippetMethod) return '';
+		const snippet = this.snippetMethod(this.inputValue as string, this.isMandatory) ?? '';
+		return snippet;
+	}
+
+	@property({ attribute: false })
+	snippetMethod?: (value: string, isMandatory: boolean) => string;
+
+	firstUpdated() {
+		console.log(this.snippetMethod);
+	}
+
 	validate() {
 		if (!this.form) return true;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
index 5c7a4ae264..efe61c1e8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
@@ -36,7 +36,6 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 	snippet = '';
 
 	#chooseSection(event: Event) {
-		event.stopPropagation();
 		const target = event.target as UmbInsertSectionCheckboxElement;
 		const checkboxes = Array.from(this.checkboxes);
 		if (checkboxes.every((checkbox) => checkbox.checked === false)) {
@@ -45,7 +44,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 		}
 		if (target.checked) {
 			this.selectedCheckbox = target;
-			this.snippet = this.snippetMethods[checkboxes.indexOf(target)](target?.inputValue as string, target?.isMandatory);
+			this.snippet = this.selectedCheckbox.snippet ?? '';
 			checkboxes.forEach((checkbox) => {
 				if (checkbox !== target) {
 					checkbox.checked = false;
@@ -65,7 +64,8 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 	}
 
 	#submit() {
-		if (this.selectedCheckbox?.validate()) this.modalHandler?.submit({ value: this.snippet ?? '' });
+		const value = this.selectedCheckbox?.snippet;
+		if (this.selectedCheckbox?.validate()) this.modalHandler?.submit({ value: value ?? '' });
 	}
 
 	render() {
@@ -73,7 +73,11 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 			<umb-body-layout headline="Insert">
 				<div id="main">
 					<uui-box>
-						<umb-insert-section-checkbox @change=${this.#chooseSection} label="Render child template" checked>
+						<umb-insert-section-checkbox
+							@change=${this.#chooseSection}
+							label="Render child template"
+							checked
+							.snippetMethod=${getRenderBodySnippet}>
 							<p slot="description">
 								Renders the contents of a child template, by inserting a <code>@RenderBody()</code> placeholder.
 							</p>
@@ -83,7 +87,8 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 							@change=${this.#chooseSection}
 							label="Render a named section"
 							show-mandatory
-							show-input>
+							show-input
+							.snippetMethod=${getRenderSectionSnippet}>
 							<p slot="description">
 								Renders a named area of a child template, by inserting a <code>@RenderSection(name)</code> placeholder.
 								This renders an area of a child template which is wrapped in a corresponding
@@ -91,7 +96,11 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 							</p>
 						</umb-insert-section-checkbox>
 
-						<umb-insert-section-checkbox @change=${this.#chooseSection} label="Define a named section" show-input>
+						<umb-insert-section-checkbox
+							@change=${this.#chooseSection}
+							label="Define a named section"
+							show-input
+							.snippetMethod=${getAddSectionSnippet}>
 							<p slot="description">
 								Defines a part of your template as a named section by wrapping it in <code>@section { ... }</code>. This
 								can be rendered in a specific area of the parent of this template, by using <code>@RenderSection</code>.
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
index 17d424a8be..5bdf5d098c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
@@ -25,11 +25,6 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 	#element = document.createElement('umb-template-workspace-edit');
 	#key = '';
 
-	connectedCallback() {
-		super.connectedCallback();
-		import('../../../core/components/code-editor/index.js');
-	}
-
 	@state()
 	_routes: UmbRoute[] = [
 		{