Skip to content

Releases: uiwjs/react-codemirror

v4.6.0

11 Apr 07:55
Compare
Choose a tag to compare

Documentation v4.6.0: https://raw.githack.com/uiwjs/react-codemirror/dc353b5/index.html
Comparing Changes: v4.5.3...v4.6.0

v4.5.3

28 Mar 04:10
Compare
Choose a tag to compare

Documentation v4.5.3: https://raw.githack.com/uiwjs/react-codemirror/63db93a/index.html
Comparing Changes: v4.5.2...v4.5.3

v4.5.2

27 Mar 19:06
Compare
Choose a tag to compare

Documentation v4.5.2: https://raw.githack.com/uiwjs/react-codemirror/a8e32c9/index.html
Comparing Changes: v4.5.1...v4.5.2

v4.5.1

24 Feb 09:21
Compare
Choose a tag to compare


v4.5.0...v4.5.1

Support Bundle...

Bundle Example: https://uiwjs.github.io/react-codemirror/bundle.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://codemirror.net/6/codemirror.js"></script>
    <script src="https://unpkg.com/@uiw/react-codemirror/dist/codemirror.min.js"></script>
  </head>
  <body>
    <div id="container" style="padding: 24px"></div>
    <script>
      window.require = function (module) {
        if (!module) {
          throw new Error(`this is a fake require only use for import ${module}`);
        }
        if (window.CM && window.CM[module]) {
          return window.CM[module];
        }
        return window[module];
      };
    </script>
    <script type="text/babel">
      import CodeMirror from '@uiw/codemirror';
      import { javascript } from '@codemirror/lang-javascript';

      const Demo = () => {
        return (
          <div>
            <CodeMirror
              value="console.log('hello world!')"
              height="200px"
              extensions={[javascript({ jsx: true })]}
              onChange={(value, viewUpdate) => {
                console.log('value:', value);
              }}
            />
          </div>
        );
      };

      ReactDOM.render(<Demo />, document.getElementById('container'));
    </script>
  </body>
</html>

v4.5.0

24 Feb 08:07
Compare
Choose a tag to compare


v4.4.3...v4.5.0

v4.4.3

17 Feb 07:31
Compare
Choose a tag to compare


v4.4.2...v4.4.3

v4.4.2

16 Feb 17:50
Compare
Choose a tag to compare


v4.4.1...v4.4.2

v4.4.1

16 Feb 08:03
Compare
Choose a tag to compare


v4.4.0...v4.4.1

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <script src="https://codemirror.net/6/codemirror.js"></script>
  <script src="https://unpkg.com/@uiw/[email protected]/dist/codemirror.min.js"></script>
</head>
<body>
  <div id="container" style="padding: 24px"></div>
  <script>
    const {javascript} = CM["@codemirror/lang-javascript"];
    const ReactCodeMirror = codemirror.default;
    const e = React.createElement;
    const Demo = () => {
      return e('div', {},
        e(ReactCodeMirror, {
          value: console.log('hello world!'),
          height: '200px',
          extensions: [javascript({ jsx: true })],
          onChange: (value, viewUpdate) => {
            console.log('value:', value);
          }
        })
      );
    }

    ReactDOM.render(e(Demo), document.getElementById("container"));
  </script>
</body>
</html>

v4.4.0

14 Feb 16:48
Compare
Choose a tag to compare


v4.3.3...v4.4.0

<script src="https://unpkg.com/@uiw/react-codemirror/dist/codemirror.min.js"></script>

Example: https://codepen.io/jaywcjlove/pen/podWJra?editors=0010

├── dist
│   ├── codemirror.js
│   └── codemirror.min.js
├── cjs
└── esm

v4.3.3

11 Jan 02:06
Compare
Choose a tag to compare


v4.3.2...v4.3.3