From 8540a9dcaf74e3b611f754874b862229cee8ebd6 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:00:32 +0530
Subject: [PATCH] feat: script action

---
 .../molecules/action-settings/script.tsx      | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/molecules/action-settings/script.tsx

diff --git a/src/components/molecules/action-settings/script.tsx b/src/components/molecules/action-settings/script.tsx
new file mode 100644
index 00000000..d3fc963a
--- /dev/null
+++ b/src/components/molecules/action-settings/script.tsx
@@ -0,0 +1,63 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import Editor from 'react-simple-code-editor';
+// @ts-ignore
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/themes/prism.css';
+import styled from "styled-components";
+import InfoIcon from '@mui/icons-material/Info';
+import { WarningText } from "../../atoms/texts";
+
+export const ScriptSettings = forwardRef((props, ref) => {
+  const [code, setCode] = React.useState('');
+
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return code;
+    }
+  }));
+
+  return (
+    <EditorWrapper>
+      <WarningText>
+        <InfoIcon color='warning'/>
+        Allows to run an arbitrary asynchronous function evaluated at the server
+        side accepting the current page instance argument.
+      </WarningText>
+      <StyledEditor
+        placeholder="Type some code…"
+        value={code}
+        onValueChange={code => setCode(code)}
+        highlight={code => highlight(code, languages.js)}
+        padding={10}
+        style={{
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 12,
+          background: '#f0f0f0',
+        }}
+      />
+    </EditorWrapper>
+  );
+});
+
+const EditorWrapper = styled.div`
+  flex: 1;
+  overflow: auto;
+    /** hard-coded height */
+  height: 100%;
+  width: 100%;
+`;
+
+const StyledEditor = styled(Editor)`
+  white-space: pre;
+  caret-color: #fff;
+  min-width: 100%;
+  min-height: 100%;
+  float: left;
+  & > textarea,
+  & > pre {
+    outline: none;
+    white-space: pre !important;
+  }
+`;