Merge pull request #102 from tableflowhq/feature/code-syntax-highligh…

…ting

Added code syntax highlighting using react-syntax-highlighter

admin-ui/package.json

@@ -27,6 +27,7 @@
  "react-router": "^6.9.0",
  "react-router-dom": "^6.9.0",
  "react-scripts": "5.0.1",
+ "react-syntax-highlighter": "^15.5.0",
  "sass": "^1.59.3",
  "typescript": "^5.0.2",
  "web-vitals": "^3.3.0",
@@ -74,6 +75,7 @@
  "devDependencies": {
  "@trivago/prettier-plugin-sort-imports": "^4.1.1",
  "@types/file-saver": "^2.0.5",
+ "@types/react-syntax-highlighter": "^15.5.7",
  "@typescript-eslint/eslint-plugin": "^5.56.0",
  "@typescript-eslint/parser": "^5.56.0",
  "babel-plugin-named-exports-order": "^0.0.2",

admin-ui/src/features/code/index.tsx

@@ -1,14 +1,21 @@
 import { useMemo } from "react";
-import { Button, Input, useLocalStorage } from "@tableflow/ui-library";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import { Button, Input, useLocalStorage, useThemeStore } from "@tableflow/ui-library";
 import notification from "../../utils/notification";
 import getCodeJavaScript from "./utils/getCodeJavaScript";
 import getCodeReact from "./utils/getCodeReact";
 import { CodeProps } from "./types";
 import style from "./style/Code.module.scss";
+import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
+import { colorBrewer as syntaxHighlighterStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+SyntaxHighlighter.registerLanguage("javascript", js);
 
 export default function Code(props: CodeProps) {
  const [framework, setFramework] = useLocalStorage("framework", "react");
 
+ const theme = useThemeStore((state) => state.theme);
+
  const options = {
  React: { value: "react" },
  JavaScript: { value: "javascript" },
@@ -21,6 +28,24 @@ export default function Code(props: CodeProps) {
  notification({ type: "success", message: "Copied to clipboard" });
  };
 
+ const customStyles = {
+ resize: "none" as "none",
+ display: "block",
+ width: "100%",
+ minHeight: 470,
+ margin: 0,
+ padding: 24,
+ border: theme === "dark" ? "1px solid #344054" : "1px solid #d0d5dd",
+ borderBottomRightRadius: 8,
+ borderBottomLeftRadius: 8,
+ fontFamily: "monospace",
+ borderTopRightRadius: 0,
+ borderTopLeftRadius: 0,
+ overflow: "hidden",
+ backgroundColor: theme === "dark" ? "#181A1F" : "#fff",
+ color: theme === "dark" ? "#fff" : "#000",
+ };
+
  return (
  <div className={style.container}>
  <Input
@@ -39,7 +64,9 @@ export default function Code(props: CodeProps) {
  </Button>
  </div>
 
- <textarea value={code} readOnly />
+ <SyntaxHighlighter language={"javascript"} style={syntaxHighlighterStyle} customStyle={customStyles}>
+ {code}
+ </SyntaxHighlighter>
  </div>
  );
 }