Request pane context (#69)

src-web/components/core/Editor/Editor.tsx

@@ -22,6 +22,7 @@ import { parseTemplate } from '../../../hooks/useParseTemplate';
 import { useSettings } from '../../../hooks/useSettings';
 import { useTemplateFunctions } from '../../../hooks/useTemplateFunctions';
 import { useDialog } from '../../DialogContext';
+import { useRequestEditor } from '../../RequestEditorContext';
 import { TemplateFunctionDialog } from '../../TemplateFunctionDialog';
 import { TemplateVariableDialog } from '../../TemplateVariableDialog';
 import { IconButton } from '../IconButton';
@@ -227,9 +228,13 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     [dialog],
   );
 
-  const onClickPathParameter = useCallback(async (name: string) => {
-    console.log('TODO: Focus', name, 'in params tab');
-  }, []);
+  const { focusParamValue } = useRequestEditor();
+  const onClickPathParameter = useCallback(
+    async (name: string) => {
+      focusParamValue(name);
+    },
+    [focusParamValue],
+  );
 
   // Update the language extension when the language changes
   useEffect(() => {

src-web/components/core/Editor/twig/templateTags.ts

@@ -120,7 +120,6 @@ function templateTags(
                   const onClick = () => onClickPathParameter(rawText);
                   const widget = new PathPlaceholderWidget(rawText, globalFrom, onClick);
                   const deco = Decoration.replace({ widget, inclusive: false });
-                  console.log('ADDED WIDGET', globalFrom, node, rawText);
                   widgets.push(deco.range(globalFrom, globalTo));
                 },
               });
@@ -201,13 +200,6 @@ export function templateTagsPlugin(
           return view.plugin(plugin)?.decorations || Decoration.none;
         });
       },
-      eventHandlers: {
-        mousedown(e) {
-          const target = e.target as HTMLElement;
-          if (target.classList.contains('template-tag')) console.log('CLICKED TEMPLATE TAG');
-          // return toggleBoolean(view, view.posAtDOM(target));
-        },
-      },
     },
   );
 }

src-web/components/core/Editor/url/highlight.ts

@@ -3,9 +3,9 @@ import { styleTags, tags as t } from '@lezer/highlight';
 export const highlight = styleTags({
   Protocol: t.comment,
   Placeholder: t.emphasis,
-  PathSegment: t.tagName,
-  Port: t.attributeName,
-  Host: t.variableName,
-  Path: t.bool,
-  Query: t.string,
+  // PathSegment: t.tagName,
+  // Port: t.attributeName,
+  // Host: t.variableName,
+  // Path: t.bool,
+  // Query: t.string,
 });