Improve node designer process method documentation

flowfile_frontend/src/renderer/app/features/designer/editor/pythonEditor.vue

@@ -20,13 +20,13 @@
 
 <script setup lang="ts">
 import { EditorView, keymap } from "@codemirror/view";
-import { EditorState, Extension } from "@codemirror/state";
+import { EditorState, Extension, Prec } from "@codemirror/state";
 import { ref, shallowRef, defineExpose, watch } from "vue";
 import { Codemirror } from "vue-codemirror";
 import { python } from "@codemirror/lang-python";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { autocompletion, CompletionSource, acceptCompletion } from "@codemirror/autocomplete";
-import { indentMore } from "@codemirror/commands";
+import { indentMore, indentLess } from "@codemirror/commands";
 import { polarsCompletionVals } from "./pythonEditor/polarsCompletions";
 
 const props = defineProps({
@@ -63,6 +63,12 @@ const tabKeymap = keymap.of([
       return indentMore(view);
     },
   },
+  {
+    key: "Shift-Tab",
+    run: (view: EditorView): boolean => {
+      return indentLess(view);
+    },
+  },
 ]);
 
 const insertTextAtCursor = (text: string) => {
@@ -88,10 +94,10 @@ const extensions: Extension[] = [
   EditorState.tabSize.of(4),
   autocompletion({
     override: [polarsCompletions],
-    defaultKeymap: false, // Disable default keymap
+    defaultKeymap: true, // Enable default keymap for arrow navigation
     closeOnBlur: false,
   }),
-  tabKeymap,
+  Prec.highest(tabKeymap), // Tab keymap with highest precedence
 ];
 
 // Rest of the component code remains the same...

flowfile_frontend/src/renderer/app/pages/NodeDesigner.vue

@@ -7,6 +7,10 @@
         <p class="page-description">Design custom nodes visually</p>
       </div>
       <div class="header-actions">
+        <button class="btn btn-secondary" @click="showHelpModal = true">
+          <i class="fa-solid fa-circle-question"></i>
+          Help
+        </button>
         <button class="btn btn-secondary" @click="nodeBrowser.openNodeBrowser()">
           <i class="fa-solid fa-folder-open"></i>
           Browse
@@ -187,11 +191,13 @@
       @cancel-delete="nodeBrowser.showDeleteConfirm.value = false"
       @delete="nodeBrowser.deleteNode()"
     />
+
+    <NodeDesignerHelpModal :show="showHelpModal" @close="showHelpModal = false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, computed } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import axios from "axios";
 
 // Child components
@@ -202,6 +208,7 @@ import ProcessCodeEditor from "./nodeDesigner/ProcessCodeEditor.vue";
 import CodePreviewModal from "./nodeDesigner/CodePreviewModal.vue";
 import ValidationModal from "./nodeDesigner/ValidationModal.vue";
 import NodeBrowserModal from "./nodeDesigner/NodeBrowserModal.vue";
+import NodeDesignerHelpModal from "./nodeDesigner/NodeDesignerHelpModal.vue";
 import IconSelector from "./nodeDesigner/IconSelector.vue";
 
 // Composables
@@ -243,6 +250,9 @@ const autocompletion = usePolarsAutocompletion(() => sections.value);
 
 const storage = useSessionStorage(getState, setState, resetState);
 
+// Help modal state
+const showHelpModal = ref(false);
+
 // Setup auto-save and load on mount
 watch([() => ({ ...nodeMetadata }), sections, processCode], () => storage.saveToSessionStorage(), {
   deep: true,