@uiw/react-codemirror - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

package.json

 {
   "name": "@uiw/react-codemirror",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "CodeMirror component for React.",
@@ -36,2 +36,3 @@ "homepage": "https://uiw-react.github.io/react-codemirror/",
     "classnames": "^2.2.6",
+    "code-example": "^1.0.5",
     "highlight.js": "^9.12.0",
@@ -38,0 +39,0 @@ "kkt": "^1.9.29",

website/App.js

@@ -69,32 +69,32 @@ import React, { PureComponent } from 'react';
 
-const code = `import React, { PureComponent } from 'react';
-import 'codemirror/addon/display/autorefresh';
-import 'codemirror/addon/comment/comment';
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/keymap/sublime';
-import 'codemirror/theme/eclipse.css';
-import logo from './logo.png';
-import styles from './App.less';
-import CodeMirror from '../../lib/';
+// const code = `import React, { PureComponent } from 'react';
+// import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/comment/comment';
+// import 'codemirror/addon/edit/matchbrackets';
+// import 'codemirror/keymap/sublime';
+// import 'codemirror/theme/eclipse.css';
+// import logo from './logo.png';
+// import styles from './App.less';
+// import CodeMirror from '../../lib/';
 
-export default class App extends PureComponent {
-  render() {
-    return (
-      <div className={styles.App}>
-        <header className={styles.AppHeader}>
-          <img src={logo} className={styles.AppLogo} alt="logo" />
-          <h1 className={styles.AppTitle}>Welcome to React-CodeMirror</h1>
-        </header>
-        <CodeMirror
-          value="<h1>I ♥ react-codemirror2</h1>"
-          options={{
-            keyMap: 'sublime',
-            mode: 'jsx',
-          }}
-        />
-      </div>
-    );
-  }
-}
-`;
+// export default class App extends PureComponent {
+//   render() {
+//     return (
+//       <div className={styles.App}>
+//         <header className={styles.AppHeader}>
+//           <img src={logo} className={styles.AppLogo} alt="logo" />
+//           <h1 className={styles.AppTitle}>Welcome to React-CodeMirror</h1>
+//         </header>
+//         <CodeMirror
+//           value="<h1>I ♥ react-codemirror2</h1>"
+//           options={{
+//             keyMap: 'sublime',
+//             mode: 'jsx',
+//           }}
+//         />
+//       </div>
+//     );
+//   }
+// }
+// `;
 const modes = ['json', 'apl', 'asciiarmor', 'asn.1', 'asterisk', 'brainfuck', 'clike', 'clojure', 'cmake', 'cobol', 'coffeescript', 'commonlisp', 'crystal', 'css', 'cypher', 'd', 'dart', 'diff', 'django', 'dockerfile', 'dtd', 'dylan', 'ebnf', 'ecl', 'eiffel', 'elm', 'erlang', 'factor', 'fcl', 'forth', 'fortran', 'gas', 'gfm', 'gherkin', 'go', 'groovy', 'haml', 'handlebars', 'haskell', 'haskell-literate', 'haxe', 'htmlembedded', 'htmlmixed', 'http', 'ini', 'idl', 'javascript', 'jinja2', 'jsx', 'julia', 'livescript', 'lua', 'markdown', 'mathematica', 'mbox', 'meta', 'mirc', 'mllike', 'modelica', 'mscgen', 'mumps', 'nginx', 'nsis', 'ntriples', 'octave', 'oz', 'pascal', 'pegjs', 'perl', 'php', 'pig', 'powershell', 'properties', 'protobuf', 'pug', 'puppet', 'python', 'q', 'r', 'rpm', 'rst', 'ruby', 'rust', 'sas', 'sass', 'scheme', 'shell', 'sieve', 'slim', 'smalltalk', 'smarty', 'solr', 'soy', 'sparql', 'spreadsheet', 'sql', 'stex', 'stylus', 'swift', 'tcl', 'textile', 'tiddlywiki', 'tiki', 'toml', 'tornado', 'troff', 'ttcn', 'ttcn-cfg', 'turtle', 'twig', 'vb', 'vbscript', 'velocity', 'verilog', 'vhdl', 'vue', 'webidl', 'xml', 'xquery', 'yacas', 'yaml', 'yaml-frontmatter', 'z80'];
@@ -125,2 +125,3 @@
     this.state = {
+      code: '',
       mode: 'jsx',
@@ -153,5 +154,17 @@ theme: 'monokai',
   componentDidMount() {
+    const { mode } = this.state;
     this.editor.focus();
+    this.loadCode(mode);
   }
+  loadCode(lang) {
+    import(`code-example/lib/${lang}.js`).then((data) => {
+      this.setState({
+        code: data.default,
+      });
+    }).catch(() => {
+      this.setState({ code: 'Please enter a sample code.' });
+    });
+  }
   onChange(e) {
+    this.loadCode(e.target.value);
     this.setState({ mode: e.target.value });
@@ -190,3 +203,3 @@ }
         <CodeMirror
-          value={code}
+          value={this.state.code}
           ref={this.getInstance}
@@ -193,0 +206,0 @@ options={{

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104248

increased by0.45%

Lines of code

553

increased by2.41%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes