JSONPath filter plugins working

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

@@ -215,6 +215,28 @@
   }
 }
 
+.cm-editor .cm-panels {
+  @apply bg-transparent border-0 text-gray-800 z-50;
+
+  input,
+  button {
+    @apply rounded-sm outline-none;
+  }
+
+  button {
+    @apply appearance-none bg-none bg-gray-800 text-gray-100 focus:bg-gray-900 cursor-default;
+  }
+
+  input {
+    @apply bg-gray-50 border border-highlight focus:border-focus outline-none;
+  }
+
+  /* Hide the "All" button */
+  button[name='select'] {
+    @apply hidden;
+  }
+}
+
 /* Add default icon. Needs low priority so it can be overwritten */
 .cm-completionIcon::after {
   content: '𝑥';

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

@@ -219,28 +219,35 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   return (
     <div className="group relative h-full w-full">
       {cmContainer}
-      {format && (
-        <HStack space={0.5} alignItems="center" className="absolute bottom-2 right-0 ">
+      {(format || actions) && (
+        <HStack
+          space={1}
+          alignItems="center"
+          justifyContent="end"
+          className="absolute bottom-2 left-0 right-0"
+        >
+          {format && (
+            <IconButton
+              showConfirm
+              size="sm"
+              title="Reformat contents"
+              icon="magicWand"
+              className="transition-all opacity-0 group-hover:opacity-100"
+              onClick={() => {
+                if (cm.current === null) return;
+                const { doc } = cm.current.view.state;
+                const formatted = format(doc.toString());
+                // Update editor and blur because the cursor will reset anyway
+                cm.current.view.dispatch({
+                  changes: { from: 0, to: doc.length, insert: formatted },
+                });
+                cm.current.view.contentDOM.blur();
+                // Fire change event
+                onChange?.(formatted);
+              }}
+            />
+          )}
           {actions}
-          <IconButton
-            showConfirm
-            size="sm"
-            title="Reformat contents"
-            icon="magicWand"
-            className="transition-opacity opacity-0 group-hover:opacity-70"
-            onClick={() => {
-              if (cm.current === null) return;
-              const { doc } = cm.current.view.state;
-              const formatted = format(doc.toString());
-              // Update editor and blur because the cursor will reset anyway
-              cm.current.view.dispatch({
-                changes: { from: 0, to: doc.length, insert: formatted },
-              });
-              cm.current.view.contentDOM.blur();
-              // Fire change event
-              onChange?.(formatted);
-            }}
-          />
         </HStack>
       )}
     </div>