Closed Altamimi-Dev closed 10 months ago
@Altamimi-Dev If you provide a reproducible example I can help you take a look at
@jaywcjlove i just used the example provided in the readme file
import LanguageSelector from "@renderer/components/language-selector";
import { Button } from "@renderer/components/ui/button";
import { useJsonToXml } from "@renderer/utils/jsonToxml";
import CodeEditor from "@uiw/react-textarea-code-editor";
import { useState } from "react";
function CodeConvertor() {
const [fromCode, setCode] = useState(`function add(a, b) {\n return a + b;\n}`);
const [toCode, setToCode] = useState("");
const languages = [
"javascript",
"typescript",
"json",
"html",
"css",
"markdown",
"sql",
"xml",
"yaml",
];
const jsonToxml = useJsonToXml("");
return (
<div>
<div className="mb-10">
<span className="text-3xl font-bold">Convertor</span>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid">
<label htmlFor="">From</label>
<LanguageSelector languages={languages} className="mb-5" />
<CodeEditor
className="rounded-md "
value={fromCode}
language="json"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
data-color-mode="dark"
style={{
fontSize: 12,
fontFamily:
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
}}
/>
</div>
<div className="grid">
<label htmlFor="">To</label>
<LanguageSelector languages={languages} className="mb-5" />
<CodeEditor
// prefixCls="react-textarea-code-editor"
className="rounded-md "
value={toCode}
language="xml"
placeholder="Please enter JS code."
// onChange={(evn) => setCode(evn.target.value)}
padding={15}
data-color-mode="dark"
style={{
fontSize: 12,
fontFamily:
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
}}
/>{" "}
</div>
</div>
<Button>
<div
onClick={() => {
const result = useJsonToXml(fromCode);
setToCode(result);
}}
>
Convert
</div>
</Button>{" "}
</div>
);
}
export default CodeConvertor;
@Altamimi-Dev https://codesandbox.io/s/https-github-com-uiwjs-react-textarea-code-editor-issues-165-mcqgwq?file=/src/App.js
You can provide reproducible examples based on the above examples.
tailwind was overriding code text color fixed now thank you :)
how can i remove the light gray highlight on text?