Remove MonacoEditor path property (#639)

* Let's forget about the path for now * unused
mui · Jul 7, 2022 · 2347594 · 2347594
1 parent 9a8a84a
commit 2347594
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx
@@ -161,7 +161,6 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
  <Box flex={1} display="flex">
  <Box flex={1}>
  <TypescriptEditor
- path={`./codeComponents/${codeComponentNode.id}.tsx`}
  value={input}
  onChange={(newValue) => setInput(newValue || '')}
  extraLibs={extraLibs}

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/JsExpressionEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/JsExpressionEditor.tsx
@@ -36,8 +36,6 @@ export function JsExpressionEditor({
  onBlur,
  sx,
 }: JsExpressionEditorProps) {
- const id = React.useId();
-
  const extraLibs = React.useMemo(() => {
  const type = jsonToTs(globalScope);
 
@@ -57,7 +55,6 @@ export function JsExpressionEditor({
  return (
  <JsExpressionEditorRoot sx={sx}>
  <TypescriptEditor
- path={`./expressions/${id}.tsx`}
  value={value}
  onChange={(code = '') => onChange(code)}
  disabled={disabled}

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageModuleEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageModuleEditor.tsx
@@ -53,7 +53,6 @@ function PageModuleEditorDialog({ pageNodeId, open, onClose }: PageModuleEditorD
  <DialogTitle>Edit page module</DialogTitle>
  <Box sx={{ height: 500 }}>
  <TypescriptEditor
- path={`./pages/${page.id}.ts`}
  value={input}
  onChange={(newValue) => setInput(newValue)}
  extraLibs={EXTRA_LIBS_HTTP_MODULES}

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -163,7 +163,11 @@ function QueryNodeEditorDialog<Q, P>({
  const dom = useDom();
 
  const [input, setInput] = React.useState(node);
- React.useEffect(() => setInput(node), [node]);
+ React.useEffect(() => {
+ if (open) {
+ setInput(node);
+ }
+ }, [open, node]);
 
  const connectionId = input.attributes.connectionId.value;
  const connection = appDom.getMaybeNode(dom, connectionId, 'connection');

diff --git a/packages/toolpad-app/src/components/MonacoEditor.tsx b/packages/toolpad-app/src/components/MonacoEditor.tsx
@@ -7,6 +7,24 @@ import * as React from 'react';
 import * as monaco from 'monaco-editor';
 import { styled, SxProps } from '@mui/material';
 import clsx from 'clsx';
+import cuid from 'cuid';
+
+function getExtension(language: string): string {
+ switch (language) {
+ case 'typescript':
+ return '.tsx';
+ case 'json':
+ return '.json';
+ case 'javascript':
+ return '.jsx';
+ case 'css':
+ return '.css';
+ case 'html':
+ return '.html';
+ default:
+ return '.jsx';
+ }
+}
 
 declare global {
  interface Window {
@@ -95,7 +113,6 @@ export interface MonacoEditorHandle {
 type EditorOptions = monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
 
 export interface MonacoEditorProps {
- path: string;
  value?: string;
  onChange?: (newValue: string) => void;
  disabled?: boolean;
@@ -110,7 +127,6 @@ export interface MonacoEditorProps {
 
 export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function MonacoEditor(
  {
- path,
  value,
  onChange,
  sx,
@@ -163,10 +179,8 @@ export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function
  }
  }
  } else {
- const pathUri = monaco.Uri.parse(path);
- const model =
- monaco.editor.getModel(pathUri) ||
- monaco.editor.createModel(value || '', language, pathUri);
+ const pathUri = monaco.Uri.parse(`./scripts/${cuid()}${getExtension(language)}`);
+ const model = monaco.editor.createModel(value || '', language, pathUri);
 
  instanceRef.current = monaco.editor.create(rootRef.current, {
  model,
@@ -181,7 +195,7 @@ export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function
  instanceRef.current.focus();
  }
  }
- }, [language, value, options, disabled, autoFocus, path]);
+ }, [language, value, options, disabled, autoFocus]);
 
  React.useEffect(() => {
  const editor = instanceRef.current;
@@ -218,6 +232,7 @@ export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function
 
  React.useEffect(() => {
  return () => {
+ instanceRef.current?.getModel()?.dispose();
  instanceRef.current?.dispose();
  instanceRef.current = null;
  };

diff --git a/packages/toolpad-app/src/components/propertyControls/json.tsx b/packages/toolpad-app/src/components/propertyControls/json.tsx
@@ -59,7 +59,6 @@ function JsonPropEditor({ label, argType, value, onChange, disabled }: EditorPro
  <DialogContent>
  <Box sx={{ height: 200 }}>
  <JsonEditor
- path={`./propertyControls/${schemaUri ? window.btoa(schemaUri) : 'default'}.json`}
  value={input}
  onChange={(newValue = '') => setInput(newValue)}
  schemaUri={schemaUri}