使用react-codemirror作日志展示，如果固定显示最后一行。
我现在是这么做的

const { height, clientHeight } = textareaRef?.current?.editor?.getScrollInfo() || {}
...
textareaRef?.current?.editor?.scrollTo(0, height)

这有个问题，value重新设置的时候，会跳回到顶部，然后再scrollTo到底部，导致出现闪动，怎么解决这个问题。。。

There is an attribute options in version 3, which can highlight lines.

So how to highlight some lines using version 4 when option attribute is gone. ?

The documentation says you can also use an object as a configuration for prop mode. When I use the example ( {name: "javascript", json: true}) it says name.toLowerCase is not a function. Is this a bug regarding this package?

/** string|object. The mode to use. When not given, this will default to the first mode that was loaded.
It may be a string, which either simply names the mode or is a MIME type associated with the mode.
Alternatively, it may be an object containing configuration options for the mode,
with a name property that names the mode (for example {name: "javascript", json: true}). */
mode?: any;

meta.js:213 Uncaught (in promise) TypeError: name.toLowerCase is not a function
at Function.CodeMirror.findModeByName (meta.js:213)
at _callee$ (index.js:79)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:293)
at Generator.next (runtime.js:118)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
at asyncToGenerator.js:32
at new Promise ()
at asyncToGenerator.js:21

There's no really good alternative for ini mode ;/

为什么要定义两个onCursorActivity？从而导致Duplicate提示？

In example, the value is assigned as a constant. However if the value is read from a state, like minor tweak of the example below:

export default function App() {
  let [val, setVal] = useState('console.log') // add this line
  return (
    <CodeMirror
      value={val} // use val from state
      height="200px"
      extensions={[javascript({ jsx: true }), scrollPastEnd()]}
      onChange={(value, viewUpdate) => {
        console.log("value:", value);
        setVal(value); // add this line
      }}
    />
  );
}

Here's the bug in v4:

1. put the cursor anywhere except the end of the text
2. edit
3. the cursor will be put in the very beginning of the text after every key stroke, which is a show stopper.
4. also reproducable with useCodeMirror hook

CodeSandbox:
https://codesandbox.io/s/react-codemirror-example-codemirror-6-forked-d9u0g?file=/src/App.js

Hi, just curious to know if there is a plan to upgrade this to CodeMirror 6.

Thanks for all the amazing stuff so far.

https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-7760

onCursorActivity or onBeforeChange Cannot be triggered

这些属性怎么触发

Could you make basicSetup and indentWithTab optional?

I am building a Tag Input component with CodeMirror and this use case doesn't require any styling or package overhead. It also increase the level of customization.

useCodeMirror.ts

let getExtensions = [basicSetup, keymap.of([indentWithTab]), updateListener, defaultThemeOption];

Brand new to Node & React, so not sure I have this right.

I tried to set option mode to an object, which is what CodeMirror supports and is the readme here, but it doesn't seem to work.

I get the following error:

Unhandled Rejection (TypeError): name.toLowerCase is not a function

If I am not wrong, this seems to be because setOptions assumes that mode is a string that is passed directly to CodeMirror.findModeByName.

If this is a real bug (rather than me doing something wrong), I can try to raise a PR to fix.

My code is this:

        <CodeMirror
          value={name}
          options={{
            theme: "monokai",
            keyMap: "sublime",
            mode: {
              name: "gfm",
              highlightFormatting: true,
            },
            lineNumbers: false
          }}
        />

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

Open

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

• chore(deps): update dependency @types/react-test-renderer to ~18.3.0
• chore(deps): update nextjs monorepo to v14.2.3 (eslint-config-next, next)
• fix(deps): update react monorepo to ~18.3.0 (react, react-dom, react-test-renderer)
• chore(deps): update dependency eslint to v9
• 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

Hi @justjavac @jaywcjlove @snnsnn @xingyuefeng !

Is it possible to have a file manager on the left side of the code editor to show a hierarchy of project files like so http://demo.icecoder.net/ICEcoder/ ?

Thanks

react-chrome-extension-boilerplate是一个用react开发谷歌浏览器插件的工具，其中inject.js能够在网页中嵌入脚本，我尝试使用react-codemirror，发现options的所有选项都不生效，我换了其他的react-codemirror发现是可以的，不知道感不感兴趣排查一下原因？

Hi Maintainer,

Could you please expose "root" config of EditorView (https://codemirror.net/6/docs/ref/#view.EditorView.constructor^config.root)?

I'm using shadow dom in my case, without this config the whole style would go broken. And there is no workaround currently.

I've read the code, seems only container is exposed by useCodeMirror hook, sadly that's not sufficient for cases using shadow dom.

I would be happy to submit a PR for this request. Just drop me some guidance if needed. The simple change would be add a prop just like container, but it would be better to expose all configs of state/view for better customization.

When trying to use in Typescript returns an error - JSX element class does not support attributes because it does not have a 'props' property.

On an initial attempt to get this working with snowpack, I'm running into an issue resolving the mode:

Uncaught (in promise) TypeError: Failed to resolve module specifier 'codemirror/mode/jsx/jsx.js'

My code is minimal boilerplate:

import React from "react"
import CodeMirror from "@uiw/react-codemirror"
import "codemirror/keymap/sublime"
import "codemirror/theme/monokai.css"

const code = `const a = 0`

const App = () =>
	<div>
		<CodeMirror
			value={code}
			options={{
				theme: "monokai",
				keyMap: "sublime",
				mode: "jsx",
				lineNumbers: true,
			}}
		/>
	</div>

export default App

code like codemirror document for lint javascript code, but doesn't work
和官方文档一样编写的lint相关代码，并不起作用

client:180 ./node_modules/@uiw/react-codemirror/lib/CodeMirror.js 148:23
Module parse failed: Unexpected token (148:23)
You may need an appropriate loader to handle this file type.
| 
|                 _context2.next = 5;
>                 return import("codemirror/mode/".concat(mode.mode, "/").concat(mode.mode, ".js"));
| 
|               case 5:

动态导入有问题

It appears that the theme prop only supports 'light'|'dark'. How do I apply other themes like the ones found in Codemirror's GitHub?

how can I change value of ReactCodeMirror using ref?

I am looking at your package and it's very promising, I was wondering if you are interested, What exactly would you test in this project to ensure that it works properly?

If you are interested I could help you write these tests.

Currently the onChange on react-codemirror is:

onChange?: (instance: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList[]) => void;

However, when logging the parameter change I get:

"{"from":{"line":1,"ch":12,"sticky":null,"xRel":1,"outside":1},"to":{"line":1,"ch":12,"sticky":null,"xRel":1,"outside":1},"text":["a"],"removed":[""],"origin":"+input"}

Which make sense since it its a linked list. The type for the parameter change should simply be CodeMirror.EditorChangeLinkedList.

I have my UI, and there are tabs with languages (english, german, etc.) so that when you change the tab, you are editing different language.

Now, I have my TextEditor functional component with codemirror (using useCodeMirror hook) and it has props:

• languageId (0: en, 1: de)
• text The string

So, in summary, somehting like this (sorry, I'm not writing JS/TS/JSX, because my project is using Kotlin/JS, but I don't think that's an issue, more in that later, but it's just a pseudocode):

texts = ["Hello", "Gutten tag"] // Fetched, just and example

tab = useState(0)

<Tabs tab={{tab}}>
  <!-- create tabs for languages -->
</Tabs>

<TextEditor languageId={{tab}} text={{texts[tab]}} />

TextEditor = FC { props ->
  cm = useCodeMirror {
    //other properties
    onChange = {text, _ ->
      console.log("onChange(${props.languageId}, $text)")
    }
    value = props.text
  }

  // <div>, useRef(), etc. to make CodeMirror work
}

Now to the issue. When I change the tab, for example from 0: english to 1: german, the followint thing appers in the console:

onChange(0, "Gutten tag")

See, the id (0) does not correspond to passed text (german). How is this even possible?! I'm in no way a React expert, but shouldn't the passing of properties be atomic? Or are the props somehow freezed in the hook or something?

Can you help me with this?

Disclaimer: I'm writing the code in Kotlin/JS, and using so called wrappers around JS libraries, but they are just helping with type safety, so I guess this is not an issue (but it might).

Hi, I am a little confused on what are the main differences/changes between react-code-mirror and this one https://github.com/scniro/react-codemirror2

kktjs/kkt-next#1

Reading the state.doc returned from useCodeMirror always returns an empty document, even when I write something in the editor!

I wonder if this package does support lsp such as https://github.com/palantir/python-language-server?
Thanks.

mode can't choose java

Shows the following warning:

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

I'm trying to run the most basic uiwjs/react-codemirror example from Readme.md and it's failing now on two separate systems. (Ubuntu 20.04 and Ubuntu 20.10)

The strange thing, one week ago it react-codemirror was working fine for me.
I haven't been able to figure out what changed, but even the most basic examples are failing for me.
I've created a new empty app, and even that fails.

I'm using React 17.0.1, npm 6.14.8

npx create-react-app foo
cd foo
npm install @uiw/react-codemirror --save
npm install codemirror --save

src/App.js only contains:

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';

const code = 'const a = 0;';

function App() {
  return (
    <div className="App">
        <p>
          <CodeMirror
            value={code}
            options={{
              theme: 'monokai',
              keyMap: 'sublime',
              mode: 'jsx',
            }}
          />
        </p>
    </div>
  );
}

export default App;

npm start

When I open it under Firefox I get:

TypeError: next is undefined
defineOptions/<
node_modules/@uiw/react-codemirror/node_modules/codemirror/lib/codemirror.js:7723

  7720 |   var next = getKeyMap(val);
  7721 |   var prev = old != Init && getKeyMap(old);
  7722 |   if (prev && prev.detach) { prev.detach(cm, next); }
> 7723 |   if (next.attach) { next.attach(cm, prev || null); }
       | ^  7724 | });
  7725 | option("extraKeys", null);
  7726 | option("configureMouse", null);

When I open the this under Chrome I get a different error message, but it still fails on the same line.

TypeError: Cannot read property 'attach' of undefined
keyMap
node_modules/@uiw/react-codemirror/node_modules/codemirror/lib/codemirror.js:7723
  7720 |   var next = getKeyMap(val);
  7721 |   var prev = old != Init && getKeyMap(old);
  7722 |   if (prev && prev.detach) { prev.detach(cm, next); }
> 7723 |   if (next.attach) { next.attach(cm, prev || null); }
       | ^  7724 | });
  7725 | option("extraKeys", null);
  7726 | option("configureMouse", null);

This is absolutely great component, thank you guys.
But I can hardly found examples to guide me use this component.
One of my question is after I edited the code, how should I get the whole edited code.
Now, I use onChenge property, and I get two args, editor, and value, but the value only contains the content I just inputed just now. I wounder how could I get whole code content instead of the content I just typed in?
here is my code:

class YamlEditor extends React.Component {
  constructor(props) {
    super(props);
    this.updateCode = this.updateCode.bind(this);
  }

  updateCode(editor, value) {
    console.log("value:", value);
  }

  render() {
    return (
      <CodeMirror
        value={this.props.yamlData}
        options={{
          theme: "monokai",
          keyMap: "sublime",
          mode: "yaml",
          lineNumbers: true,
          lineWrapping: true
        }}
        onChange={this.updateCode}
      />
    );
  }
}

I installed the lang-python 0.19.2 and it does not work.
It worked fine with the javascript example.
This my code with python.

import { python } from '@codemirror/lang-python';

<CodeMirror
            value = "print('hello world!')"
            height = "200px"
            extensions = {[python()]}
            theme = 'light'
            onChange = {(value, viewUpdate) => {
                // console.log('value:', value);
            }}
        />

Do you know why?

I can't seem to find how can I preview the results of the code ex if I have mode html if I type <h1>Hello world</h1>
I want to show it as

Hello world

设置字体大小和行高后

.CodeMirror{
  font-size: 16px;
  line-height: 1.5;
}

出现了输入框和字不对齐的情况，请问怎么解决呢？

Hello,

I'm trying to use the lineNumbers extension to add an offset to each line number.
It works fine when the component is created/rendered for the first time.

But then if the lineNumberOffset prop is changed, the CodeMirror editor is not updated.
Any idea how to fix this?

import { CatalaCell, setCodeValue } from "../file/fileSlice";
import { connect, ConnectedProps } from "react-redux";
import { RootState } from "../../app/store";
import CodeMirror from '@uiw/react-codemirror';
import { lineNumbers } from "@codemirror/gutter";
import { EditorView } from "@codemirror/view";
import { useAppDispatch } from "../../app/hooks";

const mapState = (state: RootState) => ({
  fileContent: state.file.content,
});

const mapDispatch = {
};

const connector = connect(mapState, mapDispatch);

type PropsFromRedux = ConnectedProps<typeof connector>;

type Props = PropsFromRedux & {
  cellIndex: number;
  lineNumberOffset: number;
}

const CodeEditor = (props: Props) => {
  const dispatch = useAppDispatch();
  const cell: CatalaCell = props.fileContent![props.cellIndex];

  let theme = EditorView.theme({
    "&.cm-editor": {
      padding: "10px 0 10px 0",
      fontSize: ".9em",
      fontFamily: "Roboto Mono, sans-serif",
    },
    ".cm-lineNumbers .cm-gutterElement": {
      minWidth: "45px",
      paddingRight: "0px",
      fontSize: "15px",
      lineHeight: "24px",
      marginRight: "18px",
      fontFamily: "Roboto Mono, sans-serif",
    },
    /* Disable CodeMirror's active line highlighting. */
    "& .cm-activeLineGutter, & .cm-activeLine": {
      backgroundColor: "transparent !important",
    },
    /* Disable CodeMirror's focused editor outline. */
    "&.cm-editor.cm-focused": {
      outline: "none",
    },
  }, {dark: true});

  const extensions = [
    theme,
    lineNumbers({
      formatNumber: (n, s) => {
        return (n + props.lineNumberOffset).toString();
      }
    }),
  ];

  return (
    <div style={{ marginTop: 10, marginBottom: 10 }}>
      <CodeMirror
        basicSetup={false}
        value={cell?.code?.code}
        onChange={(value, viewUpdate) => {
          dispatch(setCodeValue([props.cellIndex, value]));
        }}
        extensions={extensions}
        theme="dark"
      />
    </div>
  );
}
  
export default connector(CodeEditor);

• 操作
  在modal弹框中使用react-codemirror，控制modal的显示与隐藏

• 现象
  出现文字被截断，行号不出现，无光标(光标位于行号底层，看不见)
  

• 期望结果
  正常显示，正常输入
  

这个组件的编辑功能如何使用

Can you please have the CSS compiled instead of being imported from the node_modules

Where:

This is causing troubles when we use the library for next.js

<3

type 定义

处理事件的函数

现象

问题

比如 onDragOver 这种有两个大写字母的事件，只会转化成 dragOver ，绑定的是 dragOver 而不是 dragover，所以会失效。

临时解决办法

绑定事件用 onDragover onDragenter 这种

修复代码

const eventHandle = propNames.filter((prop) => {
  return /^on+/.test(prop);
});
// eventHandle 中确定都是 on 开头的

eventHandle.forEach((ele) => {
  // 直接去掉 on，然后小写化
  eventDict[ele] = ele.slice(2).toLowerCase();
});

i see this prop on the document, but it doesn't seem to actually work.

Is it possible to change the cursor color without overwriting it using css ? By the cursor I am referring to the block cursor that appears in vim mode. I haven't found any option to change it in the provided documentation.

Edit : It Appears that native codemirror api too does not allow changing cursor color in vim mode

When I set CodeMirror options readOnly on true and then update it to false it doesn't update and the editor stays locked. I'm passing the value in as a react prop.

I assume that it doesn't get through the if in index.js on line 49.

onChange 回调更新后，codemirror 永远调用的都是第一次传入的。

demo: https://codesandbox.io/s/great-shirley-jj7l7?file=/src/App.js

I have a project using uiw/react-codemirror version 4.0.6
It is run okay until mid night yesterday, when I clone my project and re install it. When it start some thing wrong is happended like this picture

I think some bug happend when you update new version confile with the codemirror dependency. Can you check for me?
Thank you!