diff --git a/api/package.json b/api/package.json index 027435a4e..bb2c5d3f8 100644 --- 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", diff --git a/packages/source-analysis/package.json b/packages/source-analysis/package.json index 02501617e..bd8af2221 100644 --- 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 new file mode 100644 index 000000000..684ff5347 --- /dev/null +++ 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 ( + + ); +} diff --git a/studio/src/components/CodeMirrorEditor/index.ts b/studio/src/components/CodeMirrorEditor/index.ts index 07394e054..2ff6630d1 100644 --- 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 index aab3ce4c6..4bbd9b90b 100644 --- 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 index e9b19becc..657bafa5c 100644 --- 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") && ( - )} + {body.type === "json" && ( + + setBody({ type: "json", value: bodyValue }) + } + value={body.value} + maxHeight="800px" + onSubmit={onSubmit} + /> + )} {body.type === "form-data" && (