react-textarea-code-editor

react-textarea-code-editor copied to clipboard

Possibly shown user errors in inserted code

[{"_id":"634baa2b3bcf8d7ee43f5ff2","body":"@HardCoreQual Maybe your idea can be implemented with [`plugins`](https:\/\/github.com\/rehypejs\/rehype\/blob\/main\/doc\/plugins.md#list-of-plugins) + `css`.\r\n\r\n```ts\r\n \/**\r\n * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`) \r\n * 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\r\n *\/\r\n rehypePlugins?: PluggableList;\r\n```","issue_id":1660537882626,"origin_id":1214282632,"user_origin_id":1680273,"create_time":1660451053,"update_time":1660451053,"id":1665903147813,"updated_at":"2022-10-16T06:52:27.813000Z","created_at":"2022-10-16T06:52:27.813000Z"}]

think will be great to add the possibility send errors props with the format ```typescript type Errors = { startAt: number; // start position in string endAt: number; // end...

HardCoreQual

fix(deps): update dependency rehype-prism-plus to v1.4.2

[{"_id":"634bb1a03bcf8d7ee43f65f8","body":"### <span aria-hidden=\"true\">\u2705<\/span> Deploy Preview for *vibrant-wilson-a6f337* ready!\n\n\n| Name | Link |\n|---------------------------------|------------------------|\n|<span aria-hidden=\"true\">\ud83d\udd28<\/span> Latest commit | 312e001504659f093bd5be4cf8fc715d5cfd691e |\n|<span aria-hidden=\"true\">\ud83d\udd0d<\/span> Latest deploy log | https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/deploys\/630223c7534b4a0008ee24bb |\n|<span aria-hidden=\"true\">\ud83d\ude0e<\/span> Deploy Preview | https:\/\/deploy-preview-117--vibrant-wilson-a6f337.netlify.app\/ |\n|<span aria-hidden=\"true\">\ud83d\udcf1<\/span> Preview on mobile | <details><summary> Toggle QR Code... <\/summary><br \/><br \/><br \/><br \/>_Use your smartphone camera to open QR code link._<\/details> |\n---\n\n_To edit notification comments on pull requests, go to your [Netlify site settings](https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/settings\/deploys#deploy-notifications)._","issue_id":1660537882629,"origin_id":1126263246,"user_origin_id":40209326,"create_time":1652461349,"update_time":1661084659,"id":1665905056288,"updated_at":"2022-10-16T07:24:16.288000Z","created_at":"2022-10-16T07:24:16.288000Z"}]

[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [rehype-prism-plus](https://togithub.com/timlrx/rehype-prism-plus) | [`1.4.1` -> `1.4.2`](https://renovatebot.com/diffs/npm/rehype-prism-plus/1.4.1/1.4.2) | [](https://docs.renovatebot.com/merge-confidence/)...

renovate[bot]

Cursor not lining up with text and syntax highlighting, indent, etc not working

[{"_id":"634bb386d297b62132299d64","body":"Style conflict. @anavgagneja ","issue_id":1660537882632,"origin_id":1208760297,"user_origin_id":1680273,"create_time":1660005370,"update_time":1660005370,"id":1665905542343,"updated_at":"2022-10-16T07:32:22.342000Z","created_at":"2022-10-16T07:32:22.342000Z"},{"_id":"634bb386d297b62132299d65","body":"I'm having the same issue, trying to use it together with semantic-ui-react.","issue_id":1660537882632,"origin_id":1239365396,"user_origin_id":118847,"create_time":1662556002,"update_time":1662556002,"id":1665905542347,"updated_at":"2022-10-16T07:32:22.346000Z","created_at":"2022-10-16T07:32:22.346000Z"}]

 If you look at the gif you can see that the cursor is actually above where the input appears. When you type it's really difficult to know where your...

anavgagneja

Add `syntax` prop to register a new syntax

[{"_id":"634ba5d53056137e2652f288","body":"### <span aria-hidden=\"true\">\u2705<\/span> Deploy Preview for *vibrant-wilson-a6f337* ready!\n\n\n| Name | Link |\n|---------------------------------|------------------------|\n|<span aria-hidden=\"true\">\ud83d\udd28<\/span> Latest commit | bacd8e40eea6edf4759351b95e9e115fa758157a |\n|<span aria-hidden=\"true\">\ud83d\udd0d<\/span> Latest deploy log | https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/deploys\/62e1dcc44883d200080dd655 |\n|<span aria-hidden=\"true\">\ud83d\ude0e<\/span> Deploy Preview | https:\/\/deploy-preview-85--vibrant-wilson-a6f337.netlify.app\/ |\n|<span aria-hidden=\"true\">\ud83d\udcf1<\/span> Preview on mobile | <details><summary> Toggle QR Code... <\/summary><br \/><br \/><br \/><br \/>_Use your smartphone camera to open QR code link._<\/details> |\n---\n\n_To edit notification comments on pull requests, go to your [Netlify site settings](https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/settings\/deploys#deploy-notifications)._","issue_id":1660537882636,"origin_id":1011041181,"user_origin_id":40209326,"create_time":1641993777,"update_time":1658969358,"id":1665902037068,"updated_at":"2022-10-16T06:33:57.067000Z","created_at":"2022-10-16T06:33:57.067000Z"},{"_id":"634ba5d53056137e2652f289","body":"Blocked by https:\/\/github.com\/mapbox\/rehype-prism\/pull\/32","issue_id":1660537882636,"origin_id":1011042513,"user_origin_id":2502080,"create_time":1641993855,"update_time":1641993855,"id":1665902037071,"updated_at":"2022-10-16T06:33:57.071000Z","created_at":"2022-10-16T06:33:57.071000Z"}]

`package.json` will be updated once the dependency `@mapbox/rehype-prism` publishes a new release.

mertyildiran

Dependency Dashboard

[]

This issue lists Renovate updates and detected dependencies. Read the [Dependency Dashboard](https://docs.renovatebot.com/key-concepts/dashboard/) docs to learn more.[View this repository on the Mend.io Web Portal](https://developer.mend.io/github/uiwjs/react-textarea-code-editor). ## Config Migration Needed - [ ]...

renovate[bot]

Max number of lines so it doesn't overflow my div?

[{"_id":"634ba47d378063557c2d9b72","body":"You can use [react-codemirror](https:\/\/github.com\/uiwjs\/react-codemirror) , obviously it doesn't suit your needs now.\r\n\r\n@cisc0disco ","issue_id":1660537882642,"origin_id":1164187836,"user_origin_id":1680273,"create_time":1655977363,"update_time":1655977363,"id":1665901693823,"updated_at":"2022-10-16T06:28:13.823000Z","created_at":"2022-10-16T06:28:13.823000Z"},{"_id":"634ba47d378063557c2d9b73","body":"how do I import csharp?","issue_id":1660537882642,"origin_id":1164221204,"user_origin_id":29115431,"create_time":1655978761,"update_time":1655978761,"id":1665901693827,"updated_at":"2022-10-16T06:28:13.827000Z","created_at":"2022-10-16T06:28:13.827000Z"}]

Hi, I've got a problem with formatting, I even tried editing the source, but I could achieve setting maximum height or at least setting the maximum possible number of lines....

cisc0disco

[Question] Raw data is not aligned with parsed data

[{"_id":"634baf09d297b621322999b0","body":"You can provide an example for me to help you see.\r\n@hoangviet62 https:\/\/codesandbox.io\/embed\/react-textarea-code-editor-for-example-mcebp?fontsize=14&hidenavigation=1&theme=dark","issue_id":1660537882645,"origin_id":1141154472,"user_origin_id":1680273,"create_time":1653916909,"update_time":1653916909,"id":1665904393378,"updated_at":"2022-10-16T07:13:13.378000Z","created_at":"2022-10-16T07:13:13.378000Z"}]

Hi everyone, I am facing with the issue when trying to load the data from the api. There are some special characters which can be displayed normal on and ....

hoangviet62

[Feature Request] display line number

[{"_id":"634ba47dd297b6213229901e","body":"@xsro It is more difficult to add line numbers, and there is no plan to add this feature before finding a better way.","issue_id":1660537882648,"origin_id":912651526,"user_origin_id":1680273,"create_time":1630685330,"update_time":1630685330,"id":1665901693339,"updated_at":"2022-10-16T06:28:13.339000Z","created_at":"2022-10-16T06:28:13.339000Z"},{"_id":"634ba47dd297b6213229901f","body":"Just came across this issue because I would like to support line numbers as well.\r\n\r\nWill it be in the roadmap? Or should I try to find a replacement?","issue_id":1660537882648,"origin_id":955419541,"user_origin_id":2129872,"create_time":1635610913,"update_time":1635610913,"id":1665901693344,"updated_at":"2022-10-16T06:28:13.343000Z","created_at":"2022-10-16T06:28:13.343000Z"},{"_id":"634ba47dd297b62132299020","body":"Supporting this feature inclussion , probably aprop like `showInlineLineNumbers` as an inspiration from https:\/\/www.npmjs.com\/package\/react-syntax-highlighter ","issue_id":1660537882648,"origin_id":1089494605,"user_origin_id":14318239,"create_time":1649199803,"update_time":1649199803,"id":1665901693348,"updated_at":"2022-10-16T06:28:13.348000Z","created_at":"2022-10-16T06:28:13.348000Z"},{"_id":"634ba47dd297b62132299021","body":"I added line numbers by creating a div on the left side of the code editor. Using a useEffect hook ensures that the line numbers increases as the height of the code editor increase. Let me know what you think.\r\n\r\n```js\r\nconst Code: React.FC<CodeProps> = ({\r\n id,\r\n codeData,\r\n handleCodeChange,\r\n style,\r\n language,\r\n placeholder,\r\n}) => {\r\n let numStart = 1;\r\n const ref: any = useRef(\"\");\r\n const [num, setNum] = useState([numStart]);\r\n\r\n useEffect(() => {\r\n let currentHeight: number = ref.current.offsetHeight;\r\n let eachNum = Math.round((currentHeight - 15) \/ 20);\r\n let arr = Array.from({ length: eachNum }, (_, i) => i + 1);\r\n setNum(arr);\r\n }, [ref.current.offsetHeight]);\r\n\r\n return (\r\n <CodeContainter>\r\n <LineNumbers ref={ref}>\r\n {num.map((item, index) => (\r\n <LineNumber key={index}>{item}<\/LineNumber>\r\n ))}\r\n <\/LineNumbers>\r\n <CodeEditor\r\n id={id}\r\n value={codeData}\r\n language={language}\r\n placeholder={placeholder}\r\n onChange={(event) => handleCodeChange(event)}\r\n padding={15}\r\n style={style}\r\n data-color-mode=\"dark\"\r\n \/>\r\n <\/CodeContainter>\r\n );\r\n};\r\nexport default Code;\r\n```","issue_id":1660537882648,"origin_id":1125534650,"user_origin_id":49814040,"create_time":1652400813,"update_time":1681958824,"id":1665901693352,"updated_at":"2024-05-15T10:47:54.771000Z","created_at":"2022-10-16T06:28:13.351000Z"},{"_id":"634ba47dd297b62132299022","body":"> \r\n\r\nHi, from where to import CodeContainter and LineNumbers","issue_id":1660537882648,"origin_id":1243288956,"user_origin_id":6650776,"create_time":1662965141,"update_time":1662965141,"id":1665901693356,"updated_at":"2022-10-16T06:28:13.355000Z","created_at":"2022-10-16T06:28:13.355000Z"},{"_id":"664492da4ecfda50de100c31","body":"> I added line numbers by creating a div on the left side of the code editor. Using a useEffect hook ensures that the line numbers increases as the height of the code editor increase. Let me know what you think.\r\n> \r\n> ```\r\n> const Code: React.FC<CodeProps> = ({\r\n> id,\r\n> codeData,\r\n> handleCodeChange,\r\n> style,\r\n> language,\r\n> placeholder,\r\n> }) => {\r\n> let numStart = 1;\r\n> const ref: any = useRef(\"\");\r\n> const [num, setNum] = useState([numStart]);\r\n> \r\n> useEffect(() => {\r\n> let currentHeight: number = ref.current.offsetHeight;\r\n> let eachNum = Math.round((currentHeight - 15) \/ 20);\r\n> let arr = Array.from({ length: eachNum }, (_, i) => i + 1);\r\n> setNum(arr);\r\n> }, [ref.current.offsetHeight]);\r\n> \r\n> return (\r\n> <CodeContainter>\r\n> <LineNumbers ref={ref}>\r\n> {num.map((item, index) => (\r\n> <LineNumber key={index}>{item}<\/LineNumber>\r\n> ))}\r\n> <\/LineNumbers>\r\n> <CodeEditor\r\n> id={id}\r\n> value={codeData}\r\n> language={language}\r\n> placeholder={placeholder}\r\n> onChange={(event) => handleCodeChange(event)}\r\n> padding={15}\r\n> style={style}\r\n> data-color-mode=\"dark\"\r\n> \/>\r\n> <\/CodeContainter>\r\n> );\r\n> };\r\n> export default Code;\r\n> ```\r\n\r\nLooks nice, would be nice to see a working example with the full code needed.","issue_id":1660537882648,"origin_id":1514553306,"user_origin_id":63413892,"create_time":1681902825,"update_time":1681902825,"id":1715770074784,"updated_at":"2024-05-15T10:47:54.783000Z","created_at":"2024-05-15T10:47:54.783000Z"},{"_id":"664492da4ecfda50de100c33","body":"It would be really nice to have this feature :)","issue_id":1660537882648,"origin_id":2075479728,"user_origin_id":94019221,"create_time":1713979978,"update_time":1713979978,"id":1715770074791,"updated_at":"2024-05-15T10:47:54.790000Z","created_at":"2024-05-15T10:47:54.790000Z"}]

xsro

[Feature Request] Copy to Clipboard or Customizable Button Bar

[{"_id":"634ba161378063557c2d98f9","body":"@alvin-reyes This is not suitable for current components. You may need other options.\r\n\r\n- https:\/\/github.com\/uiwjs\/react-codemirror\r\n- https:\/\/github.com\/jaywcjlove\/react-monacoeditor","issue_id":1660537882651,"origin_id":1114043089,"user_origin_id":1680273,"create_time":1651347580,"update_time":1651347580,"id":1665900897571,"updated_at":"2022-10-16T06:14:57.571000Z","created_at":"2022-10-16T06:14:57.571000Z"}]

# Proposal Hi, first of all, this is a great react component. I have used it for some of my projects and it works as intended. Great stuff! I'd like...

alvin-reyes

stop code wrap

[{"_id":"634ba806d297b621322992eb","body":"This can not be achieved, it can only be so simple.\r\n@jashwanth999 There are more complex options here:\r\n\r\nhttps:\/\/github.com\/jaywcjlove\/react-monacoeditor\r\nhttps:\/\/github.com\/uiwjs\/react-codemirror\r\n\r\n","issue_id":1660537882655,"origin_id":1104625006,"user_origin_id":1680273,"create_time":1650505793,"update_time":1650505793,"id":1665902598687,"updated_at":"2022-10-16T06:43:18.687000Z","created_at":"2022-10-16T06:43:18.687000Z"},{"_id":"664492d14a8e87d14e148635","body":"@jaywcjlove I just wonder why something like `overflow-wrap: normal` does not work here?","issue_id":1660537882655,"origin_id":1733067057,"user_origin_id":2122787,"create_time":1695626516,"update_time":1695626516,"id":1715770065585,"updated_at":"2024-05-15T10:47:45.585000Z","created_at":"2024-05-15T10:47:45.585000Z"},{"_id":"664492d14a8e87d14e148636","body":"@vangelov This highlighting is implemented by overlapping pre and textarea. Maybe this is why `overflow-wrap: normal` doesn't work.","issue_id":1660537882655,"origin_id":1733337315,"user_origin_id":1680273,"create_time":1695635619,"update_time":1695635619,"id":1715770065588,"updated_at":"2024-05-15T10:47:45.588000Z","created_at":"2024-05-15T10:47:45.588000Z"},{"_id":"664492d14a8e87d14e148637","body":"Oh, I see. Thanks for the answer.","issue_id":1660537882655,"origin_id":1733365020,"user_origin_id":2122787,"create_time":1695636664,"update_time":1695636664,"id":1715770065590,"updated_at":"2024-05-15T10:47:45.590000Z","created_at":"2024-05-15T10:47:45.590000Z"},{"_id":"664492d14a8e87d14e148639","body":"so there's nothing to do?","issue_id":1660537882655,"origin_id":1765393554,"user_origin_id":53145626,"create_time":1697496858,"update_time":1697496858,"id":1715770065594,"updated_at":"2024-05-15T10:47:45.594000Z","created_at":"2024-05-15T10:47:45.594000Z"}]

Is there any way to stop code wrap and make it horizontal scroll

jashwanth999