Fix issue with editing bodies in the requestor request view (#366)

* Fix issue with editing bodies in the requestor request view * Update package json versions for a canary release * Update !canary.mdx --------- Co-authored-by: Jacco Flenter <flenter@users.noreply.github.com>
fiberplane · Nov 19, 2024 · 43c519d · 43c519d
1 parent bb0c0e2
commit 43c519d
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 7 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.10.1",
+  "version": "0.11.0",
   "name": "@fiberplane/studio",
   "description": "Local development debugging interface for Hono apps",
   "author": "Fiberplane<info@fiberplane.com>",

diff --git a/packages/source-analysis/package.json b/packages/source-analysis/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fiberplane/source-analysis",
-  "private": true,
-  "version": "0.0.0",
+  "private": false,
+  "version": "0.1.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {

diff --git a/studio/src/components/CodeMirrorEditor/CodeMirrorTextEditor.tsx b/studio/src/components/CodeMirrorEditor/CodeMirrorTextEditor.tsx
@@ -0,0 +1,56 @@
+import "./CodeMirrorEditorCssOverrides.css";
+
+import { duotoneDark } from "@uiw/codemirror-theme-duotone";
+import CodeMirror, { basicSetup, EditorView } from "@uiw/react-codemirror";
+import { useMemo } from "react";
+import { createOnSubmitKeymap, escapeKeymap } from "./keymaps";
+import { customTheme, duotonePlaintextOverride } from "./themes";
+
+type CodeMirrorEditorProps = {
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  theme?: string;
+  readOnly?: boolean;
+  value?: string;
+  onChange: (value?: string) => void;
+  onSubmit?: () => void;
+};
+
+export function CodeMirrorTextEditor(props: CodeMirrorEditorProps) {
+  const {
+    height,
+    value,
+    onChange,
+    readOnly,
+    minHeight = "200px",
+    maxHeight,
+    onSubmit,
+  } = props;
+
+  const extensions = useMemo(
+    () => [
+      createOnSubmitKeymap(onSubmit, false),
+      basicSetup({
+        searchKeymap: false,
+      }),
+      EditorView.lineWrapping,
+      escapeKeymap,
+    ],
+    [onSubmit],
+  );
+
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      maxHeight={maxHeight}
+      minHeight={minHeight}
+      extensions={extensions}
+      onChange={onChange}
+      theme={[duotoneDark, duotonePlaintextOverride, customTheme]}
+      readOnly={readOnly}
+      basicSetup={false}
+    />
+  );
+}
diff --git a/studio/src/components/CodeMirrorEditor/index.ts b/studio/src/components/CodeMirrorEditor/index.ts
@@ -1,4 +1,5 @@
 export { CodeMirrorSqlEditor } from "./CodeMirrorSqlEditor";
 export { CodeMirrorTypescriptEditor } from "./CodeMirrorTypescriptEditor";
 export { CodeMirrorJsonEditor } from "./CodeMirrorJsonEditor";
+export { CodeMirrorTextEditor } from "./CodeMirrorTextEditor";
 export { CodeMirrorInput } from "./CodeMirrorInput";
diff --git a/studio/src/components/CodeMirrorEditor/themes.ts b/studio/src/components/CodeMirrorEditor/themes.ts
@@ -7,3 +7,9 @@ export const customTheme = EditorView.theme({
     background: "transparent !important",
   },
 });
+
+export const duotonePlaintextOverride = EditorView.theme({
+  ".cm-line": {
+    color: "#eeebff",
+  },
+});
diff --git a/studio/src/pages/RequestorPage/RequestPanel/RequestPanel.tsx b/studio/src/pages/RequestorPage/RequestPanel/RequestPanel.tsx
@@ -16,7 +16,10 @@ import { BottomToolbar } from "./BottomToolbar";
 import { FileUploadForm } from "./FileUploadForm";
 import { PathParamForm } from "./PathParamForm";
 import "./styles.css";
-import { CodeMirrorJsonEditor } from "@/components/CodeMirrorEditor";
+import {
+  CodeMirrorJsonEditor,
+  CodeMirrorTextEditor,
+} from "@/components/CodeMirrorEditor";
 import { useRequestorStore } from "../store";
 
 type RequestPanelProps = {
@@ -236,14 +239,25 @@ export const RequestPanel = memo(function RequestPanel(
               setBody(undefined);
             }}
           />
-          {(body.type === "json" || body.type === "text") && (
-            <CodeMirrorJsonEditor
+          {/* TODO - Have a proper text editor */}
+          {body.type === "text" && (
+            <CodeMirrorTextEditor
               onChange={setBody}
               value={body.value}
               maxHeight="800px"
               onSubmit={onSubmit}
             />
           )}
+          {body.type === "json" && (
+            <CodeMirrorJsonEditor
+              onChange={(bodyValue) =>
+                setBody({ type: "json", value: bodyValue })
+              }
+              value={body.value}
+              maxHeight="800px"
+              onSubmit={onSubmit}
+            />
+          )}
           {body.type === "form-data" && (
             <FormDataForm
               keyValueParameters={body.value}

diff --git a/www/src/content/changelog/!canary.mdx b/www/src/content/changelog/!canary.mdx
@@ -1,9 +1,10 @@
 ---
-date: 2024-10-18
+date: 2024-10-19
 version: canary
 draft: true
 ---
 
 ### Features
+* Improved code analysis. Through the new @fiberplane/source-analysis package a more flexbile and thorough source code implementation is included
 
 ### Bug fixes