Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to use the themes from this project with CodeMirror 6 without using React? #644

Open
brendand opened this issue Mar 31, 2024 · 1 comment

Comments

@brendand
Copy link

I am working on a Swift app (macOS/AppKit and iOS/UIKit) and I'm using CodeMirror for a script editor screen. I'd love to be able to use the themes in this project, but I'm not sure how to integrate them without using React. Can the themes be used in the basic CodeMirror without all the React dependencies?

@jaywcjlove
Copy link
Member

```js
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { abyss } from '@uiw/codemirror-theme-abyss';
const state = EditorState.create({
doc: 'my source code',
extensions: [abyss, javascript({ jsx: true })],
});
```

Everything should be fine under normal circumstances, but if you're using it in pure HTML, we might need to make some changes.

<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'));

@brendand If your non-React application uses a bundling tool, it should be able to run.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants