From ca2152d56c2b2620fa002d27be0a67f3d00e927c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 20:51:41 +0530
Subject: [PATCH] feat: ctrl+shift+n to add new field & delete/backspace to
 delete the field when it in on focus

---
 .../components/AddFieldButton.vue             |  2 ++
 .../js/form_builder/components/Field.vue      | 20 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index 28727f6075..885ccc77d8 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -124,6 +124,8 @@ function add_new_field(field) {
 watch(selected, (val) => {
 	if (!val) show.value = false;
 });
+
+defineExpose({ open: toggle_fieldtype_options });
 </script>
 
 <style lang="scss" scoped>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index c38a6961e8..5d78cbc7ef 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -4,10 +4,28 @@ import { useStore } from "../store";
 import { move_children_to_parent, clone_field } from "../utils";
 import { ref, computed, onMounted } from "vue";
 import AddFieldButton from "./AddFieldButton.vue";
+import { useMagicKeys, whenever } from "@vueuse/core";
 
 const props = defineProps(["column", "field"]);
 const store = useStore();
 
+const add_field_ref = ref(null);
+
+// cmd/ctrl + shift + n to open the add field autocomplete
+const { ctrl_shift_n, Backspace } = useMagicKeys();
+whenever(ctrl_shift_n, (value) => {
+	if (value && selected.value) {
+		add_field_ref.value.open();
+	}
+});
+
+// delete/backspace to delete the field
+whenever(Backspace, (value) => {
+	if (value && selected.value) {
+		remove_field();
+	}
+});
+
 const label_input = ref(null);
 const hovered = ref(false);
 const selected = computed(() => store.selected(props.field.df.name));
@@ -93,7 +111,7 @@ onMounted(() => selected.value && label_input.value.focus_on_label());
 			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
-					<AddFieldButton :column="column" :field="field">
+					<AddFieldButton ref="add_field_ref" :column="column" :field="field">
 						<div v-html="frappe.utils.icon('add', 'sm')" />
 					</AddFieldButton>
 					<button