;
+
+ extraLibs?: string[];
+ onValidate?: EditorProps["onValidate"];
+ onValidStatusUpdate?: ({ isValid: boolean }) => void;
+ diagnosticsOptions?: languages.typescript.DiagnosticsOptions;
+ onUnmount?: () => void;
+}
+
+export default function CodeEditor({
+ onChange,
+ value,
+ minHeight = 100,
+ disabled,
+ containerProps,
+
+ extraLibs,
+ onValidate,
+ onValidStatusUpdate,
+ diagnosticsOptions,
+ onUnmount,
+
+ ...props
+}: ICodeEditorProps) {
+ const theme = useTheme();
+ const { tableState } = useProjectContext();
+
+ const [initialEditorValue] = useState(value ?? "");
+ const monaco = useMonaco();
+
+ useEffect(() => {
+ return () => {
+ onUnmount?.();
+ };
+ }, []);
+
+ const onValidate_: EditorProps["onValidate"] = (markers) => {
+ if (onValidStatusUpdate)
+ onValidStatusUpdate({ isValid: markers.length <= 0 });
+ else if (onValidate) onValidate(markers);
+ };
+
+ useEffect(() => {
+ if (!monaco) {
+ // useMonaco returns a monaco instance but initialisation is done asynchronously
+ // dont execute the logic until the instance is initialised
+ return;
+ }
+
+ setTimeout(() => {
+ try {
+ monaco.editor.defineTheme("github-light", githubLightTheme as any);
+ monaco.editor.defineTheme("github-dark", githubDarkTheme as any);
+ monaco.editor.setTheme("github-" + theme.palette.mode);
+ } catch (error) {
+ console.error("Could not set Monaco theme: ", error);
+ }
+ });
+ }, [monaco, theme.palette.mode]);
+
+ useEffect(() => {
+ if (!monaco) {
+ // useMonaco returns a monaco instance but initialisation is done asynchronously
+ // dont execute the logic until the instance is initialised
+ return;
+ }
+
+ try {
+ monaco.editor.defineTheme("github-light", githubLightTheme as any);
+ monaco.editor.defineTheme("github-dark", githubDarkTheme as any);
+
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(firestoreDefs);
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(
+ firebaseAuthDefs
+ );
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(
+ firebaseStorageDefs
+ );
+ monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
+ diagnosticsOptions ?? {
+ noSemanticValidation: true,
+ noSyntaxValidation: false,
+ }
+ );
+ // compiler options
+ monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+ target: monaco.languages.typescript.ScriptTarget.ES2020,
+ allowNonTsExtensions: true,
+ });
+ if (extraLibs) {
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(
+ extraLibs.join("\n"),
+ "ts:filename/extraLibs.d.ts"
+ );
+ }
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(
+ utilsDefs,
+ "ts:filename/utils.d.ts"
+ );
+
+ const rowDefinition =
+ Object.keys(tableState?.columns!)
+ .map((columnKey: string) => {
+ const column = tableState?.columns[columnKey];
+ return `static ${columnKey}: ${getFieldProp("type", column.type)}`;
+ })
+ .join(";\n") + ";";
+
+ const availableFields = Object.keys(tableState?.columns!)
+ .map((columnKey: string) => `"${columnKey}"`)
+ .join("|\n");
+
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(
+ [
+ "/**",
+ " * extensions type configuration",
+ " */",
+ "// basic types that are used in all places",
+ `type Row = {${rowDefinition}};`,
+ `type Field = ${availableFields} | string | object;`,
+ `type Fields = Field[];`,
+ extensionsDefs,
+ ].join("\n"),
+ "ts:filename/extensions.d.ts"
+ );
+
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(
+ [
+ "declare var require: any;",
+ "declare var Buffer: any;",
+ "const ref: FirebaseFirestore.DocumentReference;",
+ "const storage: firebasestorage.Storage;",
+ "const db: FirebaseFirestore.Firestore;",
+ "const auth: adminauth.BaseAuth;",
+ "declare class row {",
+ " /**",
+ " * Returns the row fields",
+ " */",
+ rowDefinition,
+ "}",
+ ].join("\n"),
+ "ts:filename/rowFields.d.ts"
+ );
+ } catch (error) {
+ console.error(
+ "An error occurred during initialization of Monaco: ",
+ error
+ );
+ }
+ }, [tableState?.columns, monaco, diagnosticsOptions, extraLibs]);
+
+ return (
+
+ }
+ className="editor"
+ {...props}
+ options={{
+ readOnly: disabled,
+ fontFamily: theme.typography.fontFamilyMono,
+ rulers: [80],
+ minimap: { enabled: false },
+ lineNumbersMinChars: 4,
+ lineDecorationsWidth: 0,
+ automaticLayout: true,
+ fixedOverflowWidgets: true,
+ ...props.options,
+ }}
+ />
+
+
+
+ );
+}
diff --git a/src/components/CodeEditor/utils.d.ts b/src/components/CodeEditor/utils.d.ts
new file mode 100644
index 00000000..38a02852
--- /dev/null
+++ b/src/components/CodeEditor/utils.d.ts
@@ -0,0 +1,50 @@
+/**
+ * utility functions
+ */
+declare namespace utilFns {
+ /**
+ * Sends out an email through sendGrid
+ */
+ function sendEmail(msg: {
+ from: string;
+ templateId: string;
+ personalizations: { to: string; dynamic_template_data: any }[];
+ }): void {}
+
+ /**
+ * Gets the secret defined in Google Cloud Secret
+ */
+ async function getSecret(name: string, v?: string): any {}
+
+ /**
+ * Async version of forEach
+ */
+ async function asyncForEach(array: any[], callback: Function): void {}
+
+ /**
+ * Generate random ID from numbers and English characters including lowercase and uppercase
+ */
+ function generateId(): string {}
+
+ /**
+ * Add an item to an array field
+ */
+ function arrayUnion(val: string): void {}
+
+ /**
+ * Remove an item to an array field
+ */
+ function arrayRemove(val: string): void {}
+
+ /**
+ * Increment a number field
+ */
+ function increment(val: number): void {}
+
+ function hasRequiredFields(requiredFields: string[], data: any): boolean {}
+
+ function hasAnyRole(
+ authorizedRoles: string[],
+ context: functions.https.CallableContext
+ ): boolean {}
+}
diff --git a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
index 05b45960..93a65a3d 100644
--- a/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
+++ b/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
@@ -1,35 +1,21 @@
-import React from "react";
+import { lazy, Suspense, createElement } from "react";
import { useForm } from "react-hook-form";
import { IMenuModalProps } from "..";
-import { makeStyles, createStyles } from "@mui/styles";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import { Typography, TextField, MenuItem, ListItemText } from "@mui/material";
-import Subheading from "../Subheading";
import { getFieldProp } from "components/fields";
-import CodeEditorHelper from "components/CodeEditorHelper";
-import CodeEditor from "components/Table/editors/CodeEditor";
+import FieldSkeleton from "components/SideDrawer/Form/FieldSkeleton";
+import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
import FormAutosave from "./FormAutosave";
import { FieldType } from "constants/fields";
import { WIKI_LINKS } from "constants/externalLinks";
import { name } from "@root/package.json";
-const useStyles = makeStyles((theme) =>
- createStyles({
- typeSelect: { marginBottom: theme.spacing(1) },
- typeSelectItem: { whiteSpace: "normal" },
-
- codeEditorContainer: {
- border: `1px solid ${theme.palette.divider}`,
- borderRadius: theme.shape.borderRadius,
- },
-
- mono: {
- fontFamily: theme.typography.fontFamilyMono,
- },
- })
+const CodeEditor = lazy(
+ () => import("components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
);
export interface IDefaultValueInputProps extends IMenuModalProps {
@@ -43,7 +29,6 @@ export default function DefaultValueInput({
fieldName,
...props
}: IDefaultValueInputProps) {
- const classes = useStyles();
const _type =
type !== FieldType.derivative
? type
@@ -64,13 +49,17 @@ export default function DefaultValueInput({
value={config.defaultValue?.type ?? "undefined"}
onChange={(e) => handleChange("defaultValue.type")(e.target.value)}
fullWidth
- className={classes.typeSelect}
+ sx={{ mb: 1 }}
+ SelectProps={{
+ MenuProps: {
+ sx: { "& .MuiListItemText-root": { whiteSpace: "normal" } },
+ },
+ }}
>
@@ -135,7 +121,7 @@ export default function DefaultValueInput({
}
/>
- {React.createElement(customFieldInput, {
+ {createElement(customFieldInput, {
column: { type, key: fieldName, config, ...props, ...config },
control,
docRef: {},
@@ -147,18 +133,12 @@ export default function DefaultValueInput({
{config.defaultValue?.type === "dynamic" && (
<>
-
+ }>
-
+
)}
diff --git a/src/components/Table/Settings/Webhooks.tsx b/src/components/Table/Settings/Webhooks.tsx
index bb00aa4e..ad17cb9c 100644
--- a/src/components/Table/Settings/Webhooks.tsx
+++ b/src/components/Table/Settings/Webhooks.tsx
@@ -15,7 +15,7 @@ import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import Switch from "@mui/material/Switch";
-import CodeEditor from "../editors/CodeEditor";
+// import CodeEditor from "../editors/CodeEditor";
import { useProjectContext } from "contexts/ProjectContext";
import { makeId } from "../../../utils/fns";
@@ -144,12 +144,12 @@ export default function WebhooksDialog({ open, handleClose }) {
- {state.type === WebhookTypes.custom && (
+ {/* {state.type === WebhookTypes.custom && (
- )}
+ )} */}
{state.type === WebhookTypes.typeForm && (
<>
diff --git a/src/components/Table/TableHeader/Extensions/Step3Conditions.tsx b/src/components/Table/TableHeader/Extensions/Step3Conditions.tsx
index ad23b46b..f5df76c4 100644
--- a/src/components/Table/TableHeader/Extensions/Step3Conditions.tsx
+++ b/src/components/Table/TableHeader/Extensions/Step3Conditions.tsx
@@ -1,11 +1,15 @@
+import { lazy, Suspense } from "react";
import { IExtensionModalStepProps } from "./ExtensionModal";
import useStateRef from "react-usestateref";
-import CodeEditor from "components/Table/editors/CodeEditor";
-import CodeEditorHelper from "components/CodeEditorHelper";
-
+import FieldSkeleton from "components/SideDrawer/Form/FieldSkeleton";
+import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
import { WIKI_LINKS } from "constants/externalLinks";
+const CodeEditor = lazy(
+ () => import("components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
+);
+
const additionalVariables = [
{
key: "change",
@@ -38,14 +42,14 @@ export default function Step3Conditions({
return (
<>
-
+ }>
{
+ value={extensionObject.conditions}
+ minHeight={200}
+ onChange={(newValue) => {
setExtensionObject({
...extensionObject,
- conditions: newValue,
+ conditions: newValue || "",
});
}}
onValidStatusUpdate={({ isValid }) => {
@@ -60,7 +64,7 @@ export default function Step3Conditions({
onMount={() => setConditionEditorActive(true)}
onUnmount={() => setConditionEditorActive(false)}
/>
-
+
import("components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
+);
+
const additionalVariables = [
{
key: "change",
@@ -38,14 +43,14 @@ export default function Step4Body({
return (
<>
-
+ }>
{
+ value={extensionObject.extensionBody}
+ minHeight={400}
+ onChange={(newValue) => {
setExtensionObject({
...extensionObject,
- extensionBody: newValue,
+ extensionBody: newValue || "",
});
}}
onValidStatusUpdate={({ isValid }) => {
@@ -63,7 +68,7 @@ export default function Step4Body({
onMount={() => setBodyEditorActive(true)}
onUnmount={() => setBodyEditorActive(false)}
/>
-
+
- createStyles({
- editorWrapper: {
- position: "relative",
- minWidth: 400,
- minHeight: 100,
- height: "calc(100% - 50px)",
- border: `1px solid ${theme.palette.divider}`,
- borderRadius: theme.shape.borderRadius,
- overflow: "hidden",
- },
-
- saveButton: {
- marginTop: theme.spacing(1),
- },
- editor: {
- // overwrite user-select: none that causes editor not focusable in Safari
- userSelect: "auto",
- },
- })
-);
-
-export default function CodeEditor(props: any) {
- const {
- handleChange,
- extraLibs,
- height = 400,
- script,
- onValideStatusUpdate,
- diagnosticsOptions,
- onUnmount,
- onMount,
- } = props;
- const theme = useTheme();
- const monacoInstance = useMonaco();
-
- const [initialEditorValue] = useState(script ?? "");
- const { tableState } = useProjectContext();
- const classes = useStyles();
-
- const editorRef = useRef();
-
- useEffect(() => {
- return () => {
- onUnmount?.();
- };
- }, []);
-
- function handleEditorDidMount(_, editor) {
- editorRef.current = editor;
- onMount?.();
- }
-
- const themeTransformer = (theme: string) => {
- switch (theme) {
- case "dark":
- return "vs-dark";
- default:
- return theme;
- }
- };
-
- useMemo(async () => {
- if (!monacoInstance) {
- // useMonaco returns a monaco instance but initialisation is done asynchronously
- // dont execute the logic until the instance is initialised
- return;
- }
-
- const firestoreDefsFile = await fetch(
- `${process.env.PUBLIC_URL}/firestore.d.ts`
- );
- const firebaseAuthDefsFile = await fetch(
- `${process.env.PUBLIC_URL}/auth.d.ts`
- );
- const firebaseStorageDefsFile = await fetch(
- `${process.env.PUBLIC_URL}/storage.d.ts`
- );
- const firestoreDefs = await firestoreDefsFile.text();
- const firebaseStorageDefs = await firebaseStorageDefsFile.text();
- const firebaseAuthDefs = (await firebaseAuthDefsFile.text())
- ?.replace("export", "declare")
- ?.replace("admin.auth", "adminauth");
-
- try {
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- firestoreDefs
- );
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- firebaseAuthDefs
- );
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- firebaseStorageDefs
- );
- monacoInstance.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
- diagnosticsOptions ?? {
- noSemanticValidation: true,
- noSyntaxValidation: false,
- }
- );
- // compiler options
- monacoInstance.languages.typescript.javascriptDefaults.setCompilerOptions(
- {
- target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
- allowNonTsExtensions: true,
- }
- );
- if (extraLibs) {
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- extraLibs.join("\n"),
- "ts:filename/extraLibs.d.ts"
- );
- }
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- [
- " /**",
- " * utility functions",
- " */",
- `
- declare namespace utilFns {
- /**
- * Sends out an email through sendGrid
- */
- function sendEmail(msg: {
- from: string;
- templateId: string;
- personalizations: { to: string; dynamic_template_data: any }[];
- }): void {}
-
- /**
- * Gets the secret defined in Google Cloud Secret
- */
- async function getSecret(name: string, v?: string): any {}
-
- /**
- * Async version of forEach
- */
- async function asyncForEach(array: any[], callback: Function): void {}
-
- /**
- * Generate random ID from numbers and English characters including lowercase and uppercase
- */
- function generateId(): string {}
-
- /**
- * Add an item to an array field
- */
- function arrayUnion(val: string): void {}
-
- /**
- * Remove an item to an array field
- */
- function arrayRemove(val: string): void {}
-
- /**
- * Increment a number field
- */
- function increment(val: number): void {}
-
- function hasRequiredFields(requiredFields: string[], data: any): boolean {}
-
- function hasAnyRole(
- authorizedRoles: string[],
- context: functions.https.CallableContext
- ): boolean {}
- }
-
- `,
- ].join("\n"),
- "ts:filename/utils.d.ts"
- );
-
- const rowDefinition = [
- ...Object.keys(tableState?.columns!).map((columnKey: string) => {
- const column = tableState?.columns[columnKey];
- switch (column.type) {
- case FieldType.shortText:
- case FieldType.longText:
- case FieldType.email:
- case FieldType.phone:
- case FieldType.code:
- return `${columnKey}:string`;
- case FieldType.singleSelect:
- const typeString = [
- ...(column.config?.options?.map((opt) => `"${opt}"`) ?? []),
- ].join(" | ");
- return `${columnKey}:${typeString}`;
- case FieldType.multiSelect:
- return `${columnKey}:string[]`;
- case FieldType.checkbox:
- return `${columnKey}:boolean`;
- default:
- return `${columnKey}:any`;
- }
- }),
- ].join(";\n");
-
- const availableFields = Object.keys(tableState?.columns!)
- .map((columnKey: string) => `"${columnKey}"`)
- .join("|\n");
-
- const extensionsDefinition = `
- // basic types that are used in all places
- type Row = {${rowDefinition}};
- type Field = ${availableFields} | string | object;
- type Fields = Field[];
- type Trigger = "create" | "update" | "delete";
- type Triggers = Trigger[];
-
- // function types that defines extension body and should run
- type Condition = boolean | ((data: ExtensionContext) => boolean | Promise);
-
- // the argument that the extension body takes in
- type ExtensionContext = {
- row: Row;
- ref:FirebaseFirestore.DocumentReference;
- storage:firebasestorage.Storage;
- db:FirebaseFirestore.Firestore;
- auth:adminauth.BaseAuth;
- change: any;
- triggerType: Triggers;
- fieldTypes: any;
- extensionConfig: {
- label: string;
- type: string;
- triggers: Trigger[];
- conditions: Condition;
- requiredFields: string[];
- extensionBody: any;
- };
- utilFns: any;
- }
-
- // extension body definition
- type slackEmailBody = {
- channels?: string[];
- text?: string;
- emails: string[];
- blocks?: object[];
- attachments?: any;
- }
-
- type slackChannelBody = {
- channels: string[];
- text?: string;
- emails?: string[];
- blocks?: object[];
- attachments?: any;
- }
-
- type DocSyncBody = (context: ExtensionContext) => Promise<{
- fieldsToSync: Fields;
- row: Row;
- targetPath: string;
- }>
-
- type HistorySnapshotBody = (context: ExtensionContext) => Promise<{
- trackedFields: Fields;
- }>
-
- type AlgoliaIndexBody = (context: ExtensionContext) => Promise<{
- fieldsToSync: Fields;
- index: string;
- row: Row;
- objectID: string;
- }>
-
- type MeiliIndexBody = (context: ExtensionContext) => Promise<{
- fieldsToSync: Fields;
- index: string;
- row: Row;
- objectID: string;
- }>
-
- type BigqueryIndexBody = (context: ExtensionContext) => Promise<{
- fieldsToSync: Fields;
- index: string;
- row: Row;
- objectID: string;
- }>
-
- type SlackMessageBody = (context: ExtensionContext) => Promise;
-
- type SendgridEmailBody = (context: ExtensionContext) => Promise;
-
- type ApiCallBody = (context: ExtensionContext) => Promise<{
- body: string;
- url: string;
- method: string;
- callback: any;
- }>
-
- type TwilioMessageBody = (context: ExtensionContext) => Promise<{
- body: string;
- from: string;
- to: string;
- }>
-
- type TaskBody = (context: ExtensionContext) => Promise
- `;
-
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- [
- " /**",
- " * extensions type configuration",
- " */",
- extensionsDefinition,
- ].join("\n"),
- "ts:filename/extensions.d.ts"
- );
-
- monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
- [
- " declare var require: any;",
- " declare var Buffer: any;",
- " const ref:FirebaseFirestore.DocumentReference",
- " const storage:firebasestorage.Storage",
- " const db:FirebaseFirestore.Firestore;",
- " const auth:adminauth.BaseAuth;",
- "declare class row {",
- " /**",
- " * Returns the row fields",
- " */",
- ...Object.keys(tableState?.columns!).map((columnKey: string) => {
- const column = tableState?.columns[columnKey];
- switch (column.type) {
- case FieldType.shortText:
- case FieldType.longText:
- case FieldType.email:
- case FieldType.phone:
- case FieldType.code:
- return `static ${columnKey}:string`;
- case FieldType.singleSelect:
- const typeString = [
- ...(column.config?.options?.map((opt) => `"${opt}"`) ?? []),
- // "string",
- ].join(" | ");
- return `static ${columnKey}:${typeString}`;
- case FieldType.multiSelect:
- return `static ${columnKey}:string[]`;
- case FieldType.checkbox:
- return `static ${columnKey}:boolean`;
- default:
- return `static ${columnKey}:any`;
- }
- }),
- "}",
- ].join("\n"),
- "ts:filename/rowFields.d.ts"
- );
- } catch (error) {
- console.error(
- "An error occurred during initialization of Monaco: ",
- error
- );
- }
- }, [tableState?.columns, monacoInstance]);
-
- function handleEditorValidation(markers) {
- if (onValideStatusUpdate) {
- onValideStatusUpdate({
- isValid: markers.length <= 0,
- });
- }
- }
-
- return (
- <>
-
-
-
-
- );
-}
diff --git a/src/components/fields/Action/Settings.tsx b/src/components/fields/Action/Settings.tsx
index a7e374fd..35520fa9 100644
--- a/src/components/fields/Action/Settings.tsx
+++ b/src/components/fields/Action/Settings.tsx
@@ -11,10 +11,7 @@ import FieldSkeleton from "components/SideDrawer/Form/FieldSkeleton";
import { useProjectContext } from "contexts/ProjectContext";
const CodeEditor = lazy(
- () =>
- import(
- "components/Table/editors/CodeEditor" /* webpackChunkName: "CodeEditor" */
- )
+ () => import("components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
);
const Settings = ({ config, handleChange }) => {
@@ -93,8 +90,8 @@ const Settings = ({ config, handleChange }) => {
action script
}>
{
} else return `static ${param.name}:any`;
}),
"}",
- ],
+ ].join("\n"),
]}
- handleChange={handleChange("script")}
+ onChange={handleChange("script")}
/>
{
Undo action script
}>
diff --git a/src/components/fields/Aggregate/Settings.tsx b/src/components/fields/Aggregate/Settings.tsx
index 8d8895a8..d1002147 100644
--- a/src/components/fields/Aggregate/Settings.tsx
+++ b/src/components/fields/Aggregate/Settings.tsx
@@ -6,10 +6,7 @@ import { FieldType } from "constants/fields";
import FieldsDropdown from "components/Table/ColumnMenu/FieldsDropdown";
import { useProjectContext } from "contexts/ProjectContext";
const CodeEditor = lazy(
- () =>
- import(
- "components/Table/editors/CodeEditor" /* webpackChunkName: "CodeEditor" */
- )
+ () => import("components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
);
const Settings = ({ config, handleChange }) => {
@@ -29,7 +26,7 @@ const Settings = ({ config, handleChange }) => {
Aggergate script
}>
diff --git a/src/components/fields/Code/SideDrawerField.tsx b/src/components/fields/Code/SideDrawerField.tsx
index 5a443701..65696b80 100644
--- a/src/components/fields/Code/SideDrawerField.tsx
+++ b/src/components/fields/Code/SideDrawerField.tsx
@@ -2,46 +2,18 @@ import { Controller } from "react-hook-form";
import { ISideDrawerFieldProps } from "../types";
import CodeEditor from "components/CodeEditor";
-import { makeStyles, createStyles } from "@mui/styles";
-
-const useStyles = makeStyles((theme) =>
- createStyles({
- wrapper: {
- border: "1px solid",
- borderColor:
- theme.palette.mode === "light"
- ? "rgba(0, 0, 0, 0.09)"
- : "rgba(255, 255, 255, 0.09)",
-
- borderRadius: theme.shape.borderRadius,
- overflow: "hidden",
- },
- })
-);
export default function Code({
control,
column,
disabled,
}: ISideDrawerFieldProps) {
- const classes = useStyles();
-
return (
(
-
+
)}
/>
);
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 807829ab..45e240a3 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -5,15 +5,12 @@ import FieldSkeleton from "components/SideDrawer/Form/FieldSkeleton";
import { FieldType } from "constants/fields";
import FieldsDropdown from "components/Table/ColumnMenu/FieldsDropdown";
import { useProjectContext } from "contexts/ProjectContext";
-import CodeEditorHelper from "components/CodeEditorHelper";
+import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
import { WIKI_LINKS } from "constants/externalLinks";
const CodeEditor = lazy(
- () =>
- import(
- "components/Table/editors/CodeEditor" /* webpackChunkName: "CodeEditor" */
- )
+ () => import("components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
);
const Settings = ({ config, handleChange }) => {
@@ -63,10 +60,7 @@ const Settings = ({ config, handleChange }) => {
Derivative script
}>
-
+
diff --git a/types/custom.ts b/types/custom.ts
index ae704ef5..63f9f2d0 100644
--- a/types/custom.ts
+++ b/types/custom.ts
@@ -6,3 +6,7 @@ declare module "*.mp4" {
const content: any;
export default content;
}
+declare module "!!raw-loader!*" {
+ const content: string;
+ export default content;
+}
diff --git a/yarn.lock b/yarn.lock
index 5c7be15c..0a60e954 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2374,7 +2374,7 @@
dependencies:
state-local "^1.0.6"
-"@monaco-editor/react@^4.1.0":
+"@monaco-editor/react@^4.3.1":
version "4.3.1"
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.3.1.tgz#d65bcbf174c39b6d4e7fec43d0cddda82b70a12a"
integrity sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==