garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

add rich editor for custom code

Browse Source
This commit is contained in:
Athou
2023-06-22 14:37:56 +02:00
parent aeaaeaee0e
commit f7786d9962
3 changed files with 60 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
commafeed-client/package-lock.json generated
View File

@@ -20,6 +20,7 @@
"@mantine/notifications": "^6.0.11",
"@mantine/spotlight": "^6.0.11",
"@mantine/styles": "^6.0.11",
"@monaco-editor/react": "^4.5.1",
"@reduxjs/toolkit": "^1.9.5",
"axios": "^1.4.0",
"dayjs": "^1.11.7",
@@ -3049,6 +3050,30 @@
"moo": "^0.5.1"
}
},
"node_modules/@monaco-editor/loader": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
"integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
"dependencies": {
"state-local": "^1.0.6"
},
"peerDependencies": {
"monaco-editor": ">= 0.21.0 < 1"
}
},
"node_modules/@monaco-editor/react": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.1.tgz",
"integrity": "sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==",
"dependencies": {
"@monaco-editor/loader": "^1.3.3"
},
"peerDependencies": {
"monaco-editor": ">= 0.25.0 < 1",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -8999,6 +9024,12 @@
"ufo": "^1.1.2"
}
},
"node_modules/monaco-editor": {
"version": "0.39.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.39.0.tgz",
"integrity": "sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q==",
"peer": true
},
"node_modules/moo": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -11010,6 +11041,11 @@
"resolved": "https://registry.npmjs.org/stampit/-/stampit-4.3.2.tgz",
"integrity": "sha512-pE2org1+ZWQBnIxRPrBM2gVupkuDD0TTNIo1H6GdT/vO82NXli2z8lRE8cu/nBIHrcOCXFBAHpb9ZldrB2/qOA=="
},
"node_modules/state-local": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
},
"node_modules/std-env": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",

1
commafeed-client/package.json
View File

@@ -26,6 +26,7 @@
"@mantine/notifications": "^6.0.11",
"@mantine/spotlight": "^6.0.11",
"@mantine/styles": "^6.0.11",
"@monaco-editor/react": "^4.5.1",
"@reduxjs/toolkit": "^1.9.5",
"axios": "^1.4.0",
"dayjs": "^1.11.7",

48
commafeed-client/src/components/settings/CustomCodeSettings.tsx
View File

@@ -1,6 +1,7 @@
import { Trans } from "@lingui/macro"
import { Box, Button, Group, Stack, Textarea } from "@mantine/core"
import { Box, Button, Group, Input, Stack, useMantineTheme } from "@mantine/core"
import { useForm } from "@mantine/form"
import { Editor } from "@monaco-editor/react"
import { client, errorToStrings } from "app/client"
import { redirectToSelectedSource } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
@@ -16,8 +17,11 @@ interface FormData {
export function CustomCodeSettings() {
const settings = useAppSelector(state => state.user.settings)
const theme = useMantineTheme()
const dispatch = useAppDispatch()
const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light"
const form = useForm<FormData>()
const { setValues } = form
@@ -55,31 +59,25 @@ export function CustomCodeSettings() {
<form onSubmit={form.onSubmit(saveCustomCode.execute)}>
<Stack>
<Textarea
autosize
minRows={4}
maxRows={15}
{...form.getInputProps("customCss")}
description={<Trans>Custom CSS rules that will be applied</Trans>}
styles={{
input: {
fontFamily: "monospace",
},
}}
/>
<Input.Wrapper description={<Trans>Custom CSS rules that will be applied</Trans>}>
<Editor
height="30vh"
defaultLanguage="css"
theme={editorTheme}
options={{ minimap: { enabled: false } }}
{...form.getInputProps("customCss")}
/>
</Input.Wrapper>
<Textarea
autosize
minRows={4}
maxRows={15}
{...form.getInputProps("customJs")}
description={<Trans>Custom JS code that will be executed on page load</Trans>}
styles={{
input: {
fontFamily: "monospace",
},
}}
/>
<Input.Wrapper description={<Trans>Custom JS code that will be executed on page load</Trans>}>
<Editor
height="30vh"
defaultLanguage="javascript"
theme={editorTheme}
options={{ minimap: { enabled: false } }}
{...form.getInputProps("customJs")}
/>
</Input.Wrapper>
<Group>
<Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>