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
How to setup autocomplete #527
Comments
I mean in the react version. |
@avin-kavish The method of use is the same. <CodeMirror
value="console.log('hello world!');"
height="200px"
+ extensions={[
+ //.... Set it here
+ ]}
onChange={onChange}
/> |
@codercoin98 Example: https://codesandbox.io/embed/vibrant-marco-p8znlj?fontsize=14&hidenavigation=1&theme=dark import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { autocompletion } from "@codemirror/autocomplete";
// Our list of completions (can be static, since the editor
/// will do filtering based on context).
const completions = [
{ label: "panic", type: "keyword" },
{ label: "park", type: "constant", info: "Test completion" },
{ label: "password", type: "variable" }
];
function myCompletions(context) {
let before = context.matchBefore(/\w+/);
// If completion wasn't explicitly started and there
// is no word before the cursor, don't open completions.
if (!context.explicit && !before) return null;
return {
from: before ? before.from : context.pos,
options: completions,
validFor: /^\w*$/
};
}
function App() {
const [value, setValue] = React.useState("// Type a 'p'\n");
const onChange = React.useCallback((val, viewUpdate) => {
console.log("val:", val);
setValue(val);
}, []);
return (
<CodeMirror
value={value}
height="200px"
extensions={[autocompletion({ override: [myCompletions] })]}
onChange={onChange}
/>
);
}
export default App; |
I think this was the intend of the question
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I saw this snippet on SO for setting up SQL auto-complete with table names and columns.
Can I do the same with the react version?
The text was updated successfully, but these errors were encountered: