Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
react-simple-code-editor
Advanced tools
Readme
Simple no-frills code editor with syntax highlighting.
Several browser based code editors such as Ace, CodeMirror, Monaco etc. provide the ability to embed a full-featured code editor in your web page. However, if you just need a simple editor with syntax highlighting without any of the extra features, they can be overkill as they don't usually have a small bundle size footprint. 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.
Ctrl+Shift+M
(Mac) / Ctrl+M
to toggle capturing tab keynpm install react-simple-code-editor
or
yarn add react-simple-code-editor
You need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with prismjs
:
import React from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css'; //Example style, you can use another
function App() {
const [code, setCode] = React.useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<Editor
value={code}
onValueChange={code => setCode(code)}
highlight={code => highlight(code, languages.js)}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
fontSize: 12,
}}
/>
);
}
Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.
The editor accepts all the props accepted by textarea
. In addition, you can pass the following props:
value
(string
): Current value of the editor i.e. the code to display. This must be a controlled prop.onValueChange
(string => mixed
): Callback which is called when the value of the editor changes. You'll need to update the value prop when this is called.highlight
(string => string | React.Node
): Callback which will receive text to highlight. You'll need to return an HTML string or a React element with syntax highlighting using a library such as prismjs
.tabSize
(number
): The number of characters to insert when pressing tab key. For example, for 4 space indentation, tabSize
will be 4
and insertSpaces
will be true
. Default: 2
.insertSpaces
(boolean
): Whether to use spaces for indentation. Default: true
. If you set it to false
, you might also want to set tabSize
to 1
.ignoreTabKey
(boolean
): Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using Ctrl+Shift+M
(Mac) / Ctrl+M
manually when this is false
. Default: false
.padding
(number
): Optional padding for code. Default: 0
.textareaId
(string
): An ID for the underlying textarea
, can be useful for setting a label
.textareaClassName
(string
): A className for the underlying textarea
, can be useful for more precise control of its styles.preClassName
(string
): A className for the underlying pre
, can be useful for more precise control of its styles.satya164.github.io/react-simple-code-editor
It works by overlaying a syntax highlighted <pre>
block over a <textarea>
. When you type, select, copy text etc., you interact with the underlying <textarea>
, so the experience feels native. This is a very simple approach compared to other editors which re-implement the behaviour.
The syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user.
The vanilla <textarea>
doesn't support inserting tab characters for indentation, so we re-implement it by listening to keydown
events and programmatically updating the text. One caveat with programmatically updating the text is that we lose the undo stack, so we need to maintain our own undo stack. As a result, we can also implement improved undo behaviour such as undoing whole words similar to editors like VSCode.
Due to the way it works, it has certain limitations:
<textarea>
, changing anything that affects the layout can misalign it.-webkit-text-fill-color: transparent
, which works in all modern browsers (even non-webkit ones such as Firefox and Edge). On IE 10+, we use color: transparent
which doesn't hide the cursor. Text may appear bolder in unsupported browsers.While developing, you can run the example app to test your changes:
yarn example
Make sure your code passes TypeScript and ESLint. Run the following to verify:
yarn typescript
yarn lint
To fix formatting errors, run the following:
yarn lint -- --fix
FAQs
Simple no-frills code editor with syntax highlighting
We found that react-simple-code-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.