feat: new email template editing

Author: tobimori

blueprints/fields/success.yml

@@ -3,4 +3,4 @@ fields:
     label: dreamform.form.successMessage.label
     placeholder: dreamform.form.successMessage.default
     type: writer
-    extends: dreamform/fields/writer
+    extends: dreamform/fields/writer-with-fields

blueprints/fields/writer-with-fields.php

@@ -3,14 +3,15 @@
 use tobimori\DreamForm\DreamForm;
 
 return function () {
-	// TODO: this should contain the custom nodes to select field from dropdown
-	// but this needs Kirby 5 (probably), expect this with DreamForm 2.0
-
 	return [
 		'type' => 'writer',
 		'toolbar' => [
 			'inline' => false
 		],
 		'marks' => DreamForm::option('marks'),
+		'nodes' => [
+			DreamForm::option('nodes'),
+			'dreamformFormField' // custom node for field placeholders
+		]
 	];
 };

config/areas.php

@@ -138,6 +138,77 @@
 					];
 				}
 			],
+			'dreamform/form-fields' => [
+				'load' => function () {
+					$fieldKey = App::instance()->request()->get('field');
+					$formId = App::instance()->request()->get('form');
+
+					// get form from referrer if not provided
+					if (!$formId) {
+						$path = App::instance()->request()->header('x-fiber-referrer');
+						if ($path && preg_match('/pages\/([^\/]+\+[^\/]+)/', $path, $matches)) {
+							$formId = Str::replace($matches[1], '+', '/');
+						}
+					}
+
+					$options = [];
+					$currentValue = null;
+
+					if ($formId && $formPage = App::instance()->site()->find($formId)) {
+						// get available fields from form
+						foreach ($formPage->fields() as $field) {
+							if (!$field::hasValue() || $field->block()->type() === 'file-upload-field') {
+								continue;
+							}
+
+							$key = $field->key();
+							$label = $field->label() ?: $key;
+							$type = Str::replace($field->block()->type(), '-field', '');
+
+							// store both key and label in value for JS to use
+							$options[] = [
+								'value' => json_encode(['key' => $key, 'label' => $label]),
+								'text' => $label,
+								'info' => $type
+							];
+
+							// set current value if field matches
+							if ($fieldKey === $key) {
+								$currentValue = json_encode(['key' => $key, 'label' => $label]);
+							}
+						}
+					}
+
+					// default to first option if no selection
+					if (!$currentValue && !empty($options)) {
+						$currentValue = $options[0]['value'];
+					}
+
+					return [
+						'component' => 'k-form-dialog',
+						'props' => [
+							'fields' => [
+								'field' => [
+									'type'  => 'select',
+									'label' => t('dreamform.writerNodes.selectField'),
+									'options' => $options,
+									'required' => true,
+									'empty' => empty($options) ? t('dreamform.common.noFields') : false
+								]
+							],
+							'value' => [
+								'field' => $currentValue
+							],
+							'submitButton' => [
+								'text' => $fieldKey ? t('dreamform.common.update') : t('dreamform.common.insert')
+							]
+						]
+					];
+				},
+				'submit' => function () {
+					return true;
+				}
+			]
 		]
 	]
 ];

config/options.php

@@ -29,6 +29,11 @@
 	'page' => 'page://forms', // Slug or URI to the page where the forms are located
 	'secret' => null, // Encryption secret for htmx attributes
 	'marks' => ['bold', 'italic', 'underline', 'strike', 'link', 'email'], // Marks to be used in writer fields
+	'nodes' => [
+		'heading',
+		'bulletList',
+		'orderedList'
+	], // Nodes to be used in writer fields
 	'metadata' => [
 		'collect' => [] // 'ip' | 'userAgent'
 	],

i18n.lock

@@ -119,6 +119,8 @@ checksums:
     common.firstName: cf040a5d6a9fd696be400380cc99f54b
     common.lastName: 2c9a7de7738ca007ba9023c385149c26
     common.source: 6e87903ef260da661b2bf6d858ba68ca
+    common.insert: 51f001c133c6754ade95b64291f7c2d9
+    common.update: 079fc039262fd31b10532929685c2d1b
     field: cfd632297d7809a3539e90c9cd4728d9
     fields: dc5e476f6beca227b505d21489e8d365
     fields.button.label.label: 7c91ef5f747eea9f77a9c4f23e19fb2e
@@ -226,3 +228,5 @@ checksums:
     submissions.recent: 8f45c21623deafe714652f6e2631aaab
     validation: 1317a0978c579e81f3c4e50e7696189f
     workflow: 0240772c838117f1c837f4913fce9384
+    writerNodes.formField: a4b5ac94cb709ed99aaa503d9c3fe135
+    writerNodes.selectField: e61a273dafca0df32f7de68f6fc18875

index.css

@@ -12,7 +12,6 @@ const props = defineProps({
 const emit = defineEmits(["update"])
 const update = (value) => emit("update", { ...props.content, ...value })
 
-// use the composable for key syncing
 const { handleManualInput } = useSyncedSlug({
 	initialValue: props.content?.key,
 	syncField: "label",

index.js

@@ -50,7 +50,6 @@ const props = defineProps({
 
 const emit = defineEmits(["input"])
 
-// use the composable for slug syncing
 const { slug, handleManualInput } = useSyncedSlug({
 	initialValue: props.value,
 	syncField: props.sync,

src/components/field-header.vue

@@ -9,3 +9,34 @@
 		display: none;
 	}
 }
+
+.k-writer span[data-dreamform-field] {
+	background: var(--color-purple-200);
+	color: var(--color-purple-700);
+	padding: var(--spacing-1) var(--spacing-2);
+	border-radius: var(--rounded-sm);
+	display: inline-flex;
+	gap: 0.25rem;
+	white-space: nowrap;
+	align-items: center;
+	font-size: 0.875em;
+	line-height: 1;
+	cursor: pointer;
+	margin-inline: 2px;
+	font-weight: 500;
+	transition: all 0.2s;
+
+	&:hover {
+		background: var(--color-purple-300);
+		color: var(--color-purple-800);
+	}
+}
+
+.k-writer-input .k-toolbar-button:nth-child(3) {
+	padding-inline: var(--spacing-5);
+	--button-width: auto;
+
+	&::after {
+		content: attr(title);
+	}
+}