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

[anavgagneja]

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 },
    };
  }
});

[jaywcjlove]

Style conflict. @anavgagneja

[ComLock]

I'm having the same issue, trying to use it together with semantic-ui-react.