Is there a bundled version of the component? #267
Comments
|
I think maybe it's what you want. @raquelhortab <script src="https://unpkg.com/@uiw/react-codemirror/dist/codemirror.min.js"></script> |
|
Looks like it! trying it first thing tomorrow, thank you very much! |
|
Yes that is what I was looking for, thank you very much ! |
|
@jaywcjlove how should I use language modes with the bundled version? if I need to use: I am guessing I need a bundled version of the javscript extension as well? I do have a javascript.js file that works with the conventional Codemirror editors, but that one only defines an editor mode, I am not sure it's the same as the npm version. |
|
@raquelhortab You need the bundled version of the javascript extension. |
|
@raquelhortab I looked at the official example and made changes that should meet your needs.
<!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 fusion next');
}
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>Example @uiw/[email protected]<!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/[email protected]/dist/codemirror.min.js"></script>
</head>
<body>
<div id="container" style="padding: 24px"></div>
<script type="text/babel">
const { javascript } = CM["@codemirror/lang-javascript"];
const ReactCodeMirror = codemirror.default;
const Demo = () => {
return (
<div>
<ReactCodeMirror
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> |
|
Wow that is fantastic, it'll be very useful, thank you very much for the effort and time! |
Hi, I was wondering if there is any way I can use this component by importing a bundled version via a script tag (to be used with react-dom). The thing is I am not using node but a really old version of ruby on rails and I need to use the .js versions of react components.
The text was updated successfully, but these errors were encountered: