Hi

When highlighting JSON the name value pair is highlighting the same colour when the value is a string.
Is it possible to define the value if it a string so that it can be given another colour.

{
"state": "initial"
}

in this case both "state" and "initial" are the same colour. And for larger JSON objects it makes most of the object the same colour.

This way the colour scheme is more customisable through .w-tc-editor-var and I can match it to other outputs such as JSONPretty

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 to propose a change. Specifically on adding a few floating menu navigation inside the code editor. This will allow the developers to insert some contextual functionality into the component.

when i enter

Hello is there a way to display the language select button for the editor just like on the homepage at https://uiwjs.github.io/react-textarea-code-editor/

Thanks.

Is there any way to disable line wrapping within the editor and have horizontal scrolling instead? This would be important for editing YAML containing long strings.

As I understand it, it is best to set the div containing the code editor to control the overall height of the editor and then to set the style within the editor. However, with NextJS I cannot get it to respect the div's height and it will not limit its own height.

Please see this sandbox: https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-x8evko?file=/pages/index.js

index.js in the sandbox demonstrates that setting the height to "100px" in the containing div is not respected by the editor.
index2.js is my attempt at setting it within the editor, which does limit the height, but then pasting into the editor causes weird behaviour. The cursor does not line up to the pasted content.

Is there a way to customise which specific words in the textarea are colored/highlighted based on a custom regex function or similar? I saw the issue regarding the prism plugins but am unclear on how to implement a custom function with these that is not language related.

For example being able to detect words that start with # and color them blue.

Thanks

Hey! Thanks for this library.

The Code Editor does not work when using Jest. One reason is Jest not supporting import statements natively but what I am not understanding is that it should be using cjs - but it is not.

I created a down-to-earth, super-easy repository (it literally does nothing but importing your library and console.log). Just do npm i and run yarn jest to trigger jest.

https://github.com/activenode-bugs/uiw-react-textarea-code-editor-jest

You will see the error message of Cannot use import statement outside a module.

I googled this for hours and tried multiple things but maybe I'm overlooking something. It will always end up in trying to load unified from the rehype library with an import statement instead of going for a non-module approach.

What works (which is not a satisfying solution):

I've looked into your package folder which contains esm, cjs AND a dist folder. If you use jest with moduleNameMapper and then map @uiw/react-textarea-code-editor to @uiw/react-textarea-code-editor/dist/editor.js it will work / run.

moduleNameMapper: {
    // if you use the following, it will work
    // '@uiw/react-textarea-code-editor':
    //   '<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js',
  },

But the question is WHY? My first thought then is: Shouldn't your repo point main: "dist/editor.js" if this works seamlessly?

Which triggers my follow up question why there even is esm, cjs AND dist (can you clarify the differentiation?) and why does dist/editor.js work but cjs does not?

I feel like there is something weird going on which you can probably clarify as I am not as deep into this as you are :) Thank you so much in advance!

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.

I'd love to use scrollbar if the code get's too big.

Here's the example:

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update peaceiris/actions-gh-pages action to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency husky to v9
• chore(deps): update dependency lerna to v8
• chore(deps): update dependency lint-staged to v15
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

tried this to no avail

        onKeyDown={(e) => {
          if (e.key == "Enter" && (e.ctrlKey || e.metaKey)) {
            onSubmit(e);
            return false;
          }
        }}

I am not sure if I am missing something but it will be really cool if there's an attribute to show the number of lines.
Example: 👇

<CodeEditor showNumbers />

Is there a way to use custom styles for the text area?

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 <textarea>. But when I try to put these data to the code editor, it is parsed to the content below.


The raw data that I used the pre and textarea to show




Could you guys try to have a look on this issue?
Thanks,

Thank you for your hard work.

I am using this library with Tailwind. However, after adding the font-mono class, it is not working in the library. The reason for this is that the class .w-tc-editor is set to font-family: inherit;, which overrides the font-mono setting. This could happen to any custom class.

Although I can use inline styles or !important to fix this issue, I believe that using a class to provide the style is better practice. Furthermore, even without any font settings, the element would still inherit the style.

When printing, the colors of the code are incorrect when styles are using auto.

My system:
MacOS Ventura 13.1 set to Dark theme
Chrome 108.0.5359.124 (Official Build) (arm64)

To reproduce:

1. Go to the official CodeSandbox example: https://mcebp.csb.app/
2. Print the page

I am the maintainer of react-to-print, and this issue was discovered by one of our users: MatthewHerbst/react-to-print#540. I looked at the styles and didn't see anything obviously wrong, but I am not an expert in that area. If I can be of any assistance solving this, please let me know.

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

In onKeyDown handler by default there is a check for event.code property (https://github.com/uiwjs/react-textarea-code-editor/blob/main/src/shortcuts.ts#L7), but this property was added to event only in React v17 (https://blog.saeloun.com/2021/04/23/react-keyboard-event-code.html). Before that we can get it via event.nativeEvent.code accessor. In peerDependencies you have "react": ">=16.9.0" (https://github.com/uiwjs/react-textarea-code-editor/blob/main/package.json#L66), so maybe it is better to extend check in shortcuts method? Something like that:

const code = event.code || event.nativeEvent.code;

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 I press several times then I will return to the initial state, but with the values I typed before. how can i fix this?

Playground: https://uiwjs.github.io/react-textarea-code-editor/

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 input is going to appear and it seems erratic. Also the auto-indent doesn't seem to work and there's no syntax highlighting.

Here's my code:

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

const ReactJson = dynamic(
  () => {
    return import('react-json-view');
  },
  { ssr: false },
);

const CodeEditor = dynamic(
  // @ts-ignore
  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
  { ssr: false }
);

function ConfigJsonViewerComponent(props: any) {
  const config: any = props.config;
  const [editableConfig, setEditableConfig] = useState(JSON.stringify(config, null,'\r'))

  function onEdit(editObj: any): boolean {
    setEditableConfig(editObj);
    return true;
  }

  // @ts-ignore
  return (
    <div>
        <div>
          <h3>
            Configuration <i>{edited ? '(edited)' : ''}</i>
          </h3>
          <CodeEditor
            // @ts-ignore
            value={editableConfig}
            language="json"
            placeholder={editableConfig}
            onChange={(e: any) => onEdit(e.target.value)}
            style={{
              fontSize: 12,
              backgroundColor: "#f5f5f5",
              fontFamily:
                "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
            }}
          />
        </div>
      )}
    </div>
  );
}

export default ConfigJsonViewerComponent;

This is a next.js app so my next.js config looks like this:

const removeImports = require("next-remove-imports")();
module.exports = removeImports({
  experimental: { esmExternals: true },
  distDir: 'build',
  webpack: config => {
    return {
      ...config,
      node: { __dirname: true },
    };
  }
});

Hi, extending the theme can be an interesting feature, currently I change the background using chakra-ui color mode to achieve something like this:

But when I wrote code on the box..

Is it possible to customize the syntax highlight colors?

Hi!

Is it possible to implement something similar to https://www.jetbrains.com/help/mps/commenting-and-uncommenting-blocks-of-code.html?
By pressing some shortcut defined by us, the code selected will be commented out.

Thanks!

I'm trying to use this with a next.config.mjs file and am probably using this incorrectly. The issue I'm running into is that there is no place for me to pass my existing NextConfig as an argument into removeImports, since the signature looks like:

declare type PluginOptions = {
    test?: RegExp;
    matchImports?: string;
};
declare const _default: (pluginOptions?: PluginOptions) => (nextConfig?: NextConfig) => NextConfig;

I've tried instead to merge the output from removeImports with my initialized config, but that didn't seem to have any effect:

// @ts-check

import removeImports from 'next-remove-imports'

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));


/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
	...removeImports(),
};
export default config;

This must be the case of me doing something incorrectly, but it's blocking my ability to use this package.

Hi, I came over from https://github.com/satya164/react-simple-code-editor/.

My use case involves highlighting certain words using a custom function.
The highlighting in this version seems to be abstracted so that only language inputs to prism are allowed.
Would it be possible to add an option to use a custom highlighter?

Single numbers won't format well as it increases their size and it changes the color to red (I assume the color changing is part of the code editor so that's not a problem). I tried it with multiple languages and it doesn't work good for all of them. However, having the numbers next to a string, the problem doesn't occur.

Steps to reproduce:

1. Go to the link and select markdown https://uiwjs.github.io/react-textarea-code-editor/
2. Paste in the below code

const Comp = () => {
return <IAmHidden/>
}

const Comp = () => {
return <IAmAlsoHidden></IAmAlsoHidden>
}

Expectation:
Syntax highlight should detect return type component

Hi! I noticed that the latest version of this package, which I'm looking forward to install, hasn't been published to NPM yet.

npm install @uiw/[email protected] 
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @uiw/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

I'm just using it after declaring it myself.
Is there any better way? 😢

export type Languages =
  | 'abap'
  | 'aes'
  | 'apex'
  | 'azcli'
  | 'bat'
  | 'bicep'
  | 'brainfuck'
  | 'c'
  | 'cameligo'
  | 'clike'
  | 'clojure'
  | 'coffeescript'
  | 'cpp'
  | 'csharp'
  | 'csp'
  | 'css'
  | 'dart'
  | 'dockerfile'
  | 'ecl'
  | 'elixir'
  | 'erlang'
  | 'flow9'
  | 'freemarker2'
  | 'fsharp'
  | 'go'
  | 'graphql'
  | 'handlebars'
  | 'hcl'
  | 'html'
  | 'ini'
  | 'java'
  | 'javascript'
  | 'js'
  | 'json'
  | 'jsx'
  | 'julia'
  | 'kotlin'
  | 'less'
  | 'lex'
  | 'lexon'
  | 'liquid'
  | 'livescript'
  | 'lua'
  | 'm3'
  | 'markdown'
  | 'mips'
  | 'msdax'
  | 'mysql'
  | 'nginx'
  | 'objective-c'
  | 'pascal'
  | 'pascaligo'
  | 'perl'
  | 'pgsql'
  | 'php'
  | 'pla'
  | 'plaintext'
  | 'postiats'
  | 'powerquery'
  | 'powershell'
  | 'proto'
  | 'pug'
  | 'python'
  | 'qsharp'
  | 'r'
  | 'razor'
  | 'redis'
  | 'redshift'
  | 'restructuredtext'
  | 'ruby'
  | 'rust'
  | 'sb'
  | 'scala'
  | 'scheme'
  | 'scss'
  | 'shell'
  | 'sol'
  | 'sparql'
  | 'sql'
  | 'st'
  | 'stylus'
  | 'swift'
  | 'systemverilog'
  | 'tcl'
  | 'toml'
  | 'ts'
  | 'tsx'
  | 'twig'
  | 'typescript'
  | 'vb'
  | 'vbscript'
  | 'verilog'
  | 'vue'
  | 'xml'
  | 'yaml';

export interface CodeEditorProps extends TextareaCodeEditorProps {
  value: string;
  language: Languages;
}

Hi, this editor looks great. Unfortunately, it seems to run really slowly in Safari. Either that or updates are not being painted immediately.

Thanks,
Nicholas

Hello there, I am trying to use this editor for my project, but I am facing the following issue:

it happens if I add the lib and run the tests I have in place, I amusing a reactjs app created using CRA.

It works on the real app, so I guess this is something related to jest only?

Repo with reproducible code: https://github.com/marabesi/json-utility-tool/tree/feat/textarea-editor

action failing: https://github.com/marabesi/json-utility-tool/runs/3880042855#step:7:54

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 components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I've tried setting up a forwardRef, but can't seem to get the ref assigned.

Thanks :)

Hey, thanks for the nice component, do you have any idea how to disable Grammarly, LanguageTool and such? I tried to use spellCheck={false} without much success?

Thank you :)

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 here: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

that is, adding this package to my remix.config.js isn't helping. any suggestions would be greatly appreciated! ty for an awesome component

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/rehype/index.js from /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js not supported.
Instead change the require of /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/rehype/index.js in /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js to a dynamic import() which is available in all CommonJS modules.
    at node_modules/@uiw/react-textarea-code-editor/cjs/utils.js (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:819:118)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:7:50
    at node_modules/@uiw/react-textarea-code-editor/cjs/index.js (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:1058:362)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:7:50
    at Object.<anonymous> (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/api/index.js:17853:49)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:144:13)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:140:7)
    at Route.dispatch (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/layer.js:95:5)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:284:15
    at param (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:365:14)
    at param (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:376:14)
    at Function.process_params (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:421:3)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:280:10)
    at logger (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/morgan/index.js:144:5)
    at Layer.handle [as handle_request] (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:328:13)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/express/lib/router/index.js:280:10)
    at SendStream.error (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/serve-static/index.js:121:7)
    at SendStream.emit (node:events:513:28)
    at SendStream.error (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:270:17)
    at SendStream.onStatError (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:417:12)
    at next (/Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:759:28)
    at /Users/stuartrobinson/repos/mailpotato/frontend/mk-remix-supabase-public-demo/node_modules/send/index.js:767:23
    at FSReqCallback.oncomplete (node:fs:190:21)

I want to showing tooltip when i hover on function text.
is there an attribute for to do this?
I mean something like the image below.

I am trying to add regex tester to https://ray.run/tools similar to https://regex101.com/.

The main requirement is that I want to highlight matching parts of the code.

The other use case for this would be to develop a text diff similar to https://ray.run/tools/json-diff-analyzer

I just upgraded to version 2.0.3 and the behavior of the placeholder seems to have changed in version 2.0.2 (I believe due to #114).

Behavior prior to 2.0.2
When the placeholder attribute was set, the <code> element was empty until a value is set. The placeholder text is a different, darker color than the actual text color, as it should be.

Behavior after 2.0.2
When the placeholder is set and no value is specified, the placeholder is also listed in the <code> tag, so it overlays the actual placeholder. This means that the color is not as dark as it used to be and for some reason, the edges of the font seem rougher (not noticeable in screenshot).

Is there a way I can not add the value of the placeholder to the <code> tag, so that the behavior stays the same like versions before 2.0.3?

I want to use a dark theme for example and the operators such as '=' are always in black.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @uiw/[email protected] for the project I'm working on.

Shift+Tab works when selecting multiple lines but not when the cursor is in a single line.

Here is the diff that solved my problem:

diff --git a/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js b/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js
index f019f90..0ea03b3 100644
--- a/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js
+++ b/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js
@@ -17,7 +17,11 @@ function shortcuts(e) {
   if (code === 'tab') {
     (0, _utils.stopPropagation)(e);
     if (api.start === api.end) {
-      api.insertText('  ').position(api.start + 2, api.end + 2);
+      if (e.shiftKey) {
+        api.lineStarRemove('  ');
+      } else {
+        api.insertText('  ').position(api.start + 2, api.end + 2);
+      }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
       api.lineStarRemove('  ');
     } else if (api.getSelectedValue().indexOf('\n') > -1) {
diff --git a/node_modules/@uiw/react-textarea-code-editor/dist/editor.js b/node_modules/@uiw/react-textarea-code-editor/dist/editor.js
index c805142..94b166e 100644
--- a/node_modules/@uiw/react-textarea-code-editor/dist/editor.js
+++ b/node_modules/@uiw/react-textarea-code-editor/dist/editor.js
@@ -42953,7 +42953,7 @@ function shortcuts(e){var api=new SelectionText(e.target);/**
    * Support of shortcuts for React v16
    * https://github.com/uiwjs/react-textarea-code-editor/issues/128
    * https://blog.saeloun.com/2021/04/23/react-keyboard-event-code.html
-   */var code=(e.code||e.nativeEvent.code).toLocaleLowerCase();if(code==='tab'){stopPropagation(e);if(api.start===api.end){api.insertText('  ').position(api.start+2,api.end+2);}else if(api.getSelectedValue().indexOf('\n')>-1&&e.shiftKey){api.lineStarRemove('  ');}else if(api.getSelectedValue().indexOf('\n')>-1){api.lineStarInstert('  ');}else{api.insertText('  ').position(api.start+2,api.end);}api.notifyChange();}else if(code==='enter'){stopPropagation(e);var indent="\n".concat(api.getIndentText());api.insertText(indent).position(api.start+indent.length,api.start+indent.length);api.notifyChange();}else if(code&&/^(quote|backquote|bracketleft|digit9|comma)$/.test(code)&&api.getSelectedValue()){stopPropagation(e);var val=api.getSelectedValue();var txt='';switch(code){case'quote':txt="'".concat(val,"'");if(e.shiftKey){txt="\"".concat(val,"\"");}break;case'backquote':txt="`".concat(val,"`");break;case'bracketleft':txt="[".concat(val,"]");if(e.shiftKey){txt="{".concat(val,"}");}break;case'digit9':txt="(".concat(val,")");break;case'comma':txt="<".concat(val,">");break;}api.insertText(txt);api.notifyChange();}}
+   */var code=(e.code||e.nativeEvent.code).toLocaleLowerCase();if(code==='tab'){stopPropagation(e);if(api.start===api.end){if(e.shiftKey){api.lineStarRemove('  ');}else{api.insertText('  ').position(api.start + 2, api.end + 2);};}else if(api.getSelectedValue().indexOf('\n')>-1&&e.shiftKey){api.lineStarRemove('  ');}else if(api.getSelectedValue().indexOf('\n')>-1){api.lineStarInstert('  ');}else{api.insertText('  ').position(api.start+2,api.end);}api.notifyChange();}else if(code==='enter'){stopPropagation(e);var indent="\n".concat(api.getIndentText());api.insertText(indent).position(api.start+indent.length,api.start+indent.length);api.notifyChange();}else if(code&&/^(quote|backquote|bracketleft|digit9|comma)$/.test(code)&&api.getSelectedValue()){stopPropagation(e);var val=api.getSelectedValue();var txt='';switch(code){case'quote':txt="'".concat(val,"'");if(e.shiftKey){txt="\"".concat(val,"\"");}break;case'backquote':txt="`".concat(val,"`");break;case'bracketleft':txt="[".concat(val,"]");if(e.shiftKey){txt="{".concat(val,"}");}break;case'digit9':txt="(".concat(val,")");break;case'comma':txt="<".concat(val,">");break;}api.insertText(txt);api.notifyChange();}}
 ;// CONCATENATED MODULE: ./src/styles.ts
 var container={position:'relative',textAlign:'left',boxSizing:'border-box',padding:0,overflow:'hidden'};var styles_textarea={position:'absolute',top:0,left:0,height:'100%',width:'100%',resize:'none',color:'inherit',opacity:0.8,overflow:'hidden',MozOsxFontSmoothing:'grayscale',WebkitFontSmoothing:'antialiased',WebkitTextFillColor:'transparent'};var editor={margin:0,border:0,background:'none',boxSizing:'inherit',display:'inherit',fontFamily:'inherit',fontSize:'inherit',fontStyle:'inherit',fontVariantLigatures:'inherit',fontWeight:'inherit',letterSpacing:'inherit',lineHeight:'inherit',tabSize:'inherit',textIndent:'inherit',textRendering:'inherit',textTransform:'inherit',whiteSpace:'pre-wrap',wordBreak:'keep-all',overflowWrap:'break-word',outline:0};
 ;// CONCATENATED MODULE: ./src/style/index.less
diff --git a/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js b/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js
index 25bc764..7a4390d 100644
--- a/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js
+++ b/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js
@@ -11,7 +11,11 @@ export default function shortcuts(e) {
   if (code === 'tab') {
     stopPropagation(e);
     if (api.start === api.end) {
-      api.insertText('  ').position(api.start + 2, api.end + 2);
+      if (e.shiftKey) {
+        api.lineStarRemove('  ');
+      } else {
+        api.insertText('  ').position(api.start + 2, api.end + 2);
+      }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
       api.lineStarRemove('  ');
     } else if (api.getSelectedValue().indexOf('\n') > -1) {
diff --git a/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts b/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts
index 8e0a2c8..5a91851 100644
--- a/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts
+++ b/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts
@@ -13,7 +13,11 @@ export default function shortcuts(e: React.KeyboardEvent<HTMLTextAreaElement>) {
   if (code === 'tab') {
     stopPropagation(e);
     if (api.start === api.end) {
-      api.insertText('  ').position(api.start + 2, api.end + 2);
+      if (e.shiftKey) {
+        api.lineStarRemove('  ');
+      } else {
+        api.insertText('  ').position(api.start + 2, api.end + 2);
+      }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
       api.lineStarRemove('  ');
     } else if (api.getSelectedValue().indexOf('\n') > -1) {

This issue body was partially generated by patch-package.

Thanks for the awesome and simple to use package. I like it, since it's very simple and it suits my needs perfectly. However, I stumbled upon an issue that I can't seem to get rid of.

If I give CodeEditor an initial value (see code sample below), then when building the project into static files it will display [object Object],[object Object],[object Object] in the editor.

I first thought it had something to do with the state. I initially had a useState and passed the value of that state to the value prop of the editor. But after some inspection, I found that even if the value prop is set to a simple string, it will still render [object Object],[object Object],[object Object] inside the editor.

This only occurs when I build the project into static files. During the development with the live server, this bug does not occur.

Package Version: 1.4.16
Vite version: 2.8.0

Component CodeEditor.tsx:

import { ChangeEvent } from "react";
import { useMantineTheme } from "@mantine/core";

import CodeEditor from '@uiw/react-textarea-code-editor';
import "@uiw/react-textarea-code-editor/dist.css";

type Props = {
    query: string | null,
    setQuery: (value: string) => void,
};
const Editor = ({ query, setQuery }: Props) => {
    const theme = useMantineTheme();

    return (
        <CodeEditor
            value={`SELECT *`}
            language="sql"
            placeholder="Enter a SQL query."
            onChange={(evn: ChangeEvent<HTMLTextAreaElement>) => setQuery(evn.target.value)}
            padding={theme.spacing.md}
            style={{
                height: '100%',
                fontSize: theme.fontSizes.lg,
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : "white",
                border: theme.colorScheme === 'dark' ? 'none' : `1px solid ${theme.colors.gray[4]}`,
                borderRadius: theme.radius.sm,
                resize: 'none',
                overflowY: 'auto',
                fontFamily:
                    "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
            }}
        />
    );
};

export default Editor

Rendered HTML:

<pre aria-hidden="true" class=" language-sql" tabindex="0">
  <code class=" language-sql">
    [object Object],[object Object],[object Object]
  </code>
  <br>
</pre>

Output:

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 a PR, thanks!

think will be great to add the possibility send errors props with the format

type Errors = {
   startAt: number; // start position in string
   endAt: number; // end position in string
   message: string; // message by hover
}[]

startAt, endAt will use to add a red underline for the respective code
the message will show by hovering over the error line, but it is harder to implement

When trying to get ref to underlying textarea, it is returning some exception.

version: 1.4.15

sample code.

export function SimpleHTMLEditor() {

    const editorRef = React.useRef(false);

    const onBold = () => {
        // editorRef.current is pointing to some exception.
    };

    return (
        <>
            <button onClick={onBold} >bold text</button>
            <CodeEditor
                ref={editorRef}
                value={code}
                language="html"
                placeholder="Please enter HTML code."
            />
        </>
    );
}

Add prop to allow disabling the code editor (not-editable)

When I try to use this package in a React/Nextjs project, I get the following errors:

Module not found: ESM packages (rehype) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
and

wait  - compiling...
error - ../../node_modules/@uiw/react-textarea-code-editor/esm/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ../../node_modules/@uiw/react-textarea-code-editor/esm/index.js

The link in the error message suggests the following:

Reach out to the maintainer and ask for them to publish a compiled version of their dependency.
Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

So I wanted to hear the thoughts of the maintainers of this package. Thanks!

I integrated this nice editor in my project and my bundle size (produced with Vite 4) increased of ~900KB.
Is this expected?

Whenever I add “overflow:”auto”” to the style in this with a fixed height, the text seems to overlap itself and get messed up as if it’s coming back down from the top as seen in the picture. Is there a way to properly have an overflow scroll here?