react-textarea-code-editor

react-textarea-code-editor copied to clipboard

chore(deps): update dependency husky to v9

[{"_id":"66d0d382a14080c01c02e75f","body":"### <span aria-hidden=\"true\">\u274c<\/span> Deploy Preview for *vibrant-wilson-a6f337* failed.\n\n\n| Name | Link |\n|:-:|------------------------|\n|<span aria-hidden=\"true\">\ud83d\udd28<\/span> Latest commit | 5958c00d67f0878df90af6067392f54443efe5b5 |\n|<span aria-hidden=\"true\">\ud83d\udd0d<\/span> Latest deploy log | https:\/\/app.netlify.com\/sites\/vibrant-wilson-a6f337\/deploys\/65b1dfe9a4224f0008a1144e |","issue_id":1710324800515,"origin_id":1909321512,"user_origin_id":40209326,"create_time":1706156010,"update_time":1706156010,"id":1724961666263,"updated_at":"2024-08-29T20:01:06.263000Z","created_at":"2024-08-29T20:01:06.263000Z"}]

This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [husky](https://redirect.github.com/typicode/husky) | [`^8.0.3` -> `^9.0.0`](https://renovatebot.com/diffs/npm/husky/8.0.3/9.1.7) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/)...

renovate[bot]

more customisable padding

[{"_id":"66d0d34a5a1d13a4470953fd","body":"@jkoufalas like this?\r\n\r\n```css\r\n.w-tc-editor-preview, .w-tc-editor-text {\r\n padding-left: 32px !important;\r\n}\r\n```","issue_id":1710324800522,"origin_id":1962755916,"user_origin_id":1680273,"create_time":1708817060,"update_time":1708817060,"id":1724961610485,"updated_at":"2024-08-29T20:00:10.484000Z","created_at":"2024-08-29T20:00:10.484000Z"}]

Hi I love this package, its very useful. Thanks Is there a way to use padding in a specific direction instead of the uniform padding prop whish applies the specified...

jkoufalas

Module not found: Can't resolve 'devlop'

[{"_id":"66d0d34fa14080c01c02e73a","body":"@WagnerEsser If you provide a reproducible example, I can arrange it for you.","issue_id":1710324800536,"origin_id":1872517284,"user_origin_id":1680273,"create_time":1703938676,"update_time":1703938676,"id":1724961615360,"updated_at":"2024-08-29T20:00:15.359000Z","created_at":"2024-08-29T20:00:15.359000Z"},{"_id":"66d0d34fa14080c01c02e73b","body":"add this in package.json \r\n```json\r\n \"@parcel\/resolver-default\": {\r\n \"packageExports\": true\r\n },\r\n```","issue_id":1710324800536,"origin_id":1884252549,"user_origin_id":33440355,"create_time":1704867269,"update_time":1704867269,"id":1724961615366,"updated_at":"2024-08-29T20:00:15.366000Z","created_at":"2024-08-29T20:00:15.366000Z"},{"_id":"66d0d34fa14080c01c02e73c","body":"I have the same issue when installing CodeEditor in our project for the first time. \r\n\r\nHowever, it does not happen in a fresh instance of create-react-app.\r\n\r\nThe suggestion from @botshen did not make any difference for me. I will likely continue to investigate and come back with a solution if I find one.","issue_id":1710324800536,"origin_id":1907935170,"user_origin_id":2609402,"create_time":1706095432,"update_time":1706095432,"id":1724961615374,"updated_at":"2024-08-29T20:00:15.373000Z","created_at":"2024-08-29T20:00:15.373000Z"}]

I get this error on update lib from 2.1.9 to 3.0.0. 

WagnerEsser

How to use with Remixjs?

[{"_id":"66d0d363a14080c01c02e759","body":"- https:\/\/github.com\/uiwjs\/react-md-editor\/issues\/446#issue-1417594634\r\n\r\nNot sure if there is a similar solution\r\n\r\n@stuartcrobinson ","issue_id":1710324800545,"origin_id":1439306468,"user_origin_id":1680273,"create_time":1677028969,"update_time":1677028969,"id":1724961635560,"updated_at":"2024-08-29T20:00:35.559000Z","created_at":"2024-08-29T20:00:35.559000Z"},{"_id":"66d0d363a14080c01c02e75a","body":"This is a bit belated, but a guy on my team was able to work around that error by using Lazy and Suspense:\r\n\r\n```tsx\r\nimport React, { Suspense } from \"react\";\r\n\r\nconst LazyCodeEditor = React.lazy(() => import(\"@uiw\/react-textarea-code-editor\"));\r\n\r\nexport const CodeEditor: React.FunctionComponent<Parameters<typeof LazyCodeEditor>[0]> = (\r\n props\r\n) => (\r\n <Suspense>\r\n <LazyCodeEditor {...props} \/>\r\n <\/Suspense>\r\n);\r\n```\r\n\r\nAnd then import `CodeEditor` from this file when you want to use it","issue_id":1710324800545,"origin_id":1861844269,"user_origin_id":12187505,"create_time":1702941623,"update_time":1703003243,"id":1724961635563,"updated_at":"2024-08-29T20:00:35.563000Z","created_at":"2024-08-29T20:00:35.563000Z"}]

i'm getting this error below when loading the root of my web app. code editor is on a separate route. and i'm getting this same error after following the advice...

stuartcrobinson

Can I show line numbers ?

[{"_id":"66d0d3675e9926b2b605115b","body":"- https:\/\/github.com\/uiwjs\/react-textarea-code-editor\/issues\/36\r\n- https:\/\/github.com\/uiwjs\/react-textarea-code-editor\/issues\/148","issue_id":1710324800551,"origin_id":1816368504,"user_origin_id":1680273,"create_time":1700225597,"update_time":1700225597,"id":1724961639038,"updated_at":"2024-08-29T20:00:39.038000Z","created_at":"2024-08-29T20:00:39.038000Z"},{"_id":"66d0d3675e9926b2b605115c","body":"Thank you for your kindness!","issue_id":1710324800551,"origin_id":1816382398,"user_origin_id":41446048,"create_time":1700226034,"update_time":1700226034,"id":1724961639043,"updated_at":"2024-08-29T20:00:39.042000Z","created_at":"2024-08-29T20:00:39.042000Z"}]

I want to show line numbers in this component How to show line numbers? or Can I show line numbers ?

acsses

CTRL + Z | Undo

[{"_id":"66d0d360b3dc7ee8eb119aa6","body":"I did not reproduce your problem. @jottasystem ","issue_id":1710324800576,"origin_id":1655000148,"user_origin_id":1680273,"create_time":1690519788,"update_time":1690519788,"id":1724961632250,"updated_at":"2024-08-29T20:00:32.250000Z","created_at":"2024-08-29T20:00:32.250000Z"},{"_id":"66d0d360b3dc7ee8eb119aa8","body":"@jaywcjlove What is happening is that when we try to do the \"Undo\" action after we have skipped a line or hit the Enter key, sometimes the \"Undo\" function does not work. I will leave a gif to see if it can be a little clearer.\r\nIn the example I write a small text then I press some enter and write another text and start to precious the ctrl + z when doing this action it makes the \"undo\" correctly until it reaches the point where there was the line break.\r\n\r\n\r\n","issue_id":1710324800576,"origin_id":1658593591,"user_origin_id":72466814,"create_time":1690817031,"update_time":1690817109,"id":1724961632255,"updated_at":"2024-08-29T20:00:32.254000Z","created_at":"2024-08-29T20:00:32.254000Z"}]

Hello guys! I've a big problem with "undo"... When I typing any values but I press "Enter", I need to do "UNDO", only the line is currently working, and if...

jottasystem

[Feature Request] CSV support

[{"_id":"66d0d3605e9926b2b6051157","body":"I don't know what it means to support CSV, is it syntax?\r\n@ggmartins ","issue_id":1710324800587,"origin_id":1622763320,"user_origin_id":1680273,"create_time":1688605508,"update_time":1688605508,"id":1724961632284,"updated_at":"2024-08-29T20:00:32.283000Z","created_at":"2024-08-29T20:00:32.283000Z"},{"_id":"66d0d3605e9926b2b6051158","body":"syntax highlight, just like some of the vscode extensions","issue_id":1710324800587,"origin_id":1622768929,"user_origin_id":2147779,"create_time":1688605998,"update_time":1688605998,"id":1724961632287,"updated_at":"2024-08-29T20:00:32.287000Z","created_at":"2024-08-29T20:00:32.287000Z"},{"_id":"66d0d3605e9926b2b6051159","body":"Hi @jaywcjlove \r\n\r\nThere are IDE extensions that can give a different color to each column in a CSV file.For example, [Rainbow CSV](https:\/\/marketplace.visualstudio.com\/items?itemName=mechatroner.rainbow-csv) on vs code.\r\n\r\nThis is extremely useful when viewing and editing large csv files.","issue_id":1710324800587,"origin_id":2155150612,"user_origin_id":55603058,"create_time":1717777151,"update_time":1717777151,"id":1724961632292,"updated_at":"2024-08-29T20:00:32.292000Z","created_at":"2024-08-29T20:00:32.292000Z"}]

CSV support would be great to have, for each column a different color from a color palette Let me know if this is hard to do, or if you'd like...

ggmartins

chinese input error

[{"_id":"66d0d350a14080c01c02e73f","body":"In my case, fixed by below option.\r\n```\r\n onKeyDown={(evn) => {\r\n if (evn.nativeEvent.isComposing) {\r\n return false\r\n }\r\n }}\r\n```","issue_id":1710324800595,"origin_id":2184944472,"user_origin_id":1094339,"create_time":1719140572,"update_time":1719140572,"id":1724961616623,"updated_at":"2024-08-29T20:00:16.623000Z","created_at":"2024-08-29T20:00:16.623000Z"},{"_id":"66d0d350a14080c01c02e740","body":"\r\nhttps:\/\/github.com\/uiwjs\/react-textarea-code-editor\/assets\/1680273\/211ea8f9-17b8-47d8-ac45-e6ca4788438d\r\n\r\n@kimkit I couldn't reproduce the error.","issue_id":1710324800595,"origin_id":2184947255,"user_origin_id":1680273,"create_time":1719141163,"update_time":1719141163,"id":1724961616627,"updated_at":"2024-08-29T20:00:16.627000Z","created_at":"2024-08-29T20:00:16.627000Z"}]

when i enter

kimkit

Unable to access ref on CodeEditor using NextJS dynamic

[{"_id":"66d0d3595e9926b2b6051154","body":"\r\n- https:\/\/github.com\/vercel\/next.js\/issues\/4957\r\n- https:\/\/github.com\/cookpete\/react-player\/issues\/1455\r\n\r\n@saleemameen I hope the above issue can help you, I can't help you.\r\n\r\nI tried some methods but none of them work\r\n\r\nhttps:\/\/codesandbox.io\/s\/react-textarea-code-editor-example-nextjs-https-github-com-uiwjs-react-textarea-code-editor-issues-154-kpdvfm?file=\/pages\/index.js","issue_id":1710324800606,"origin_id":1617499324,"user_origin_id":1680273,"create_time":1688368172,"update_time":1688368172,"id":1724961625117,"updated_at":"2024-08-29T20:00:25.117000Z","created_at":"2024-08-29T20:00:25.117000Z"},{"_id":"66d0d3595e9926b2b6051155","body":"@jaywcjlove Thanks for your effort. I *think* I've managed to come up with a solution that works for anyone that's interested \ud83d\ude0a Please take a look and see if you can reproduce on your end, then maybe you can share in the docs for others?\r\n\r\n### 1. Create a component called WrappedEditor.tsx where you import the CodeEditor normally\r\n\r\n~~~tsx\r\nimport { type Ref } from 'react';\r\nimport CodeEditor, { type TextareaCodeEditorProps } from '@uiw\/react-textarea-code-editor';\r\n\r\ninterface WrappedEditorProps extends TextareaCodeEditorProps {\r\n editorRef: Ref<HTMLTextAreaElement> | undefined;\r\n}\r\n\r\nexport default function WrappedEditorComponent({ editorRef, ...props }: WrappedEditorProps) {\r\n return <CodeEditor {...props} ref={editorRef} \/>;\r\n}\r\n~~~\r\n\r\n### 2. Create a component called CodeEditor.tsx where you import the WrappedEditor component dynamically\r\n\r\n~~~tsx\r\n'use client';\r\nimport dynamic from 'next\/dynamic';\r\nimport React, { useRef } from 'react';\r\nimport '@uiw\/react-textarea-code-editor\/dist.css';\r\n\r\nconst WrappedEditor = dynamic(() => import('.\/WrappedEditor'), {\r\n ssr: false,\r\n});\r\n\r\nexport default function CodeEditor() {\r\n const editorRef = useRef<HTMLTextAreaElement | null>(null);\r\n const [code, setCode] = React.useState(`function add(a, b) {\\n return a + b;\\n}`);\r\n console.log('editorRef', editorRef);\r\n return (\r\n <div>\r\n\t<WrappedEditor\r\n value={code}\r\n language=\"js\"\r\n placeholder=\"Please enter JS code.\"\r\n onChange={(evn) => setCode(evn.target.value)}\r\n padding={15}\r\n editorRef={editorRef}\r\n style={{\r\n fontSize: 12,\r\n backgroundColor: '#f5f5f5',\r\n fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',\r\n }}\r\n\t\/>\r\n <\/div>\r\n);\r\n}\r\n~~~","issue_id":1710324800606,"origin_id":1617587049,"user_origin_id":8047032,"create_time":1688371733,"update_time":1688371733,"id":1724961625121,"updated_at":"2024-08-29T20:00:25.120000Z","created_at":"2024-08-29T20:00:25.120000Z"}]

Can you please provide an example of how to attach a ref to the CodeEditor component when using NextJS dynamic to load the editor. I get the error: Warning: Function...

saleemameen

Pressing the tab key on a readonly textarea causes a tab in the value

[{"_id":"66d0d34f5a1d13a4470953ff","body":"@SangJunBak Upgrade `v2.1.7` https:\/\/codesandbox.io\/embed\/wonderful-night-4m86j4?fontsize=14&hidenavigation=1&theme=dark\r\n\r\n```jsx\r\nimport React, { useEffect } from \"react\";\r\nimport CodeEditor, { SelectionText } from \"@uiw\/react-textarea-code-editor\";\r\nimport \".\/styles.css\";\r\n\r\nexport default function App() {\r\n const textRef = React.useRef();\r\n const [code, setCode] = React.useState(\r\n `function add(a, b) {\\n return a + b;\\n}`\r\n );\r\n useEffect(() => {\r\n if (textRef.current) {\r\n const obj = new SelectionText(textRef.current);\r\n console.log(\"obj:\", obj);\r\n }\r\n }, []);\r\n return (\r\n <>\r\n <div>\r\n <h3>Auto<\/h3>\r\n <CodeEditor\r\n value={code}\r\n ref={textRef}\r\n language=\"js\"\r\n placeholder=\"Please enter JS code.\"\r\n onChange={(evn) => setCode(evn.target.value)}\r\n padding={15}\r\n readOnly\r\n style={{\r\n fontFamily:\r\n \"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace\",\r\n fontSize: 12\r\n }}\r\n \/>\r\n <\/div>\r\n <\/>\r\n );\r\n}\r\n```","issue_id":1710324800614,"origin_id":1604345786,"user_origin_id":1680273,"create_time":1687529671,"update_time":1687529671,"id":1724961615593,"updated_at":"2024-08-29T20:00:15.593000Z","created_at":"2024-08-29T20:00:15.593000Z"}]

SangJunBak