diff --git a/admin-ui/package.json b/admin-ui/package.json index 56ab879f..1705626f 100644 --- a/admin-ui/package.json +++ b/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", diff --git a/admin-ui/src/features/code/index.tsx b/admin-ui/src/features/code/index.tsx index f8019e1e..db891002 100644 --- a/admin-ui/src/features/code/index.tsx +++ b/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 (
-