Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@uiw/react-textarea-code-editor
Advanced tools
Readme
A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
Features:
@v2
.$ npm i @uiw/react-textarea-code-editor
https://uiwjs.github.io/react-textarea-code-editor/
import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor';
export default function App() {
const [code, setCode] = useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<CodeEditor
value={code}
language="js"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
style={{
backgroundColor: "#f5f5f5",
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
}}
/>
);
}
List of rehype plugins to use.
import CodeEditor from '@uiw/react-textarea-code-editor';
import rehypePrism from "rehype-prism-plus";
import rehypeRewrite from "rehype-rewrite";
import "./styles.css";
function App() {
const [code, setCode] = React.useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<CodeEditor
value={code}
language="js"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
rehypePlugins={[
[rehypePrism, { ignoreMissing: true }],
[
rehypeRewrite,
{
rewrite: (node, index, parent) => {
if (node.properties?.className?.includes("code-line")) {
if (index === 0 && node.properties?.className) {
node.properties.className.push("demo01");
// console.log("~~~", index, node.properties?.className);
}
}
if (node.type === "text" && node.value === "return" && parent.children.length === 1) {
parent.properties.className.push("demo123");
}
}
}
]
]}
style={{
fontSize: 12,
backgroundColor: "#f5f5f5",
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
}}
/>
);
}
The following example can help you exclude code highlighting code from being included in the bundle. @uiw/react-textarea-code-editor/nohighlight
component does not contain the code highlighting package.rehype-prism-plus
import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor/nohighlight';
export default function App() {
const [code, setCode] = useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<CodeEditor
value={code}
language="js"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
style={{
backgroundColor: "#f5f5f5",
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
}}
/>
);
}
Use examples in nextjs. #31
npm install next-remove-imports
npm install @uiw/react-textarea-code-editor@v1.4.4
// next.config.js
const removeImports = require("next-remove-imports")();
module.exports = removeImports({
experimental: { esmExternals: true }
});
import React from "react";
import dynamic from "next/dynamic";
import "@uiw/react-textarea-code-editor/dist.css";
const CodeEditor = dynamic(
() => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
{ ssr: false }
);
function HomePage() {
const [code, setCode] = React.useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<div>
<CodeEditor
value={code}
language="js"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
style={{
fontSize: 12,
backgroundColor: "#f5f5f5",
fontFamily:
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
}}
/>
</div>
);
}
export default HomePage;
By default, the dark-mode
is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark"
parameter for html Element.
<html data-color-mode="dark">
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
Inherit custom color variables by adding .w-tc-editor-var
selector.
const Demo = () => {
return (
<div>
<div className="w-tc-editor-var"> </div>
<CodeEditor value={code} />
</div>
)
}
Set (data-color-mode="dark"
) dark theme.
import CodeEditor from '@uiw/react-textarea-code-editor';
function App() {
return (
<CodeEditor
value="function add(a, b) {\n return a + b;\n}"
data-color-mode="dark"
/>
);
}
interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
prefixCls?: string;
/**
* Support dark-mode/night-mode
*/
['data-color-mode']?: 'dark' | 'light';
/**
* Set what programming language the code belongs to.
*/
language?: string;
/**
* Optional padding for code. Default: `10`.
*/
padding?: number;
/**
* rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)
* List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options
*/
rehypePlugins?: PluggableList;
/**
* The minimum height of the editor. Default: `16`.
*/
minHeight?: number;
onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
}
List of supported languages can be found here
Runs the project in development mode.
# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start
production
Builds the app for production to the build folder.
npm run build
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.
FAQs
A simple code editor with syntax highlighting.
The npm package @uiw/react-textarea-code-editor receives a total of 20,044 weekly downloads. As such, @uiw/react-textarea-code-editor popularity was classified as popular.
We found that @uiw/react-textarea-code-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.