Hi @Kyle , this is my code:
import { useCallback, useState } from "react";
import { JQLEditorAsync as JQLEditor } from "@atlaskit/jql-editor";
import { useAutocompleteProvider } from "@atlaskit/jql-editor-autocomplete-rest";
const getInitialData = async (url: string) => {
return {
jqlFields: [
{
value: `"user"`,
displayName: "User",
searchable: "true",
orderable: "true",
auto: "true",
operators: ["=", "!=", "in"],
types: ["user"],
},
],
jqlFunctions: [],
};
};
const getSuggestions = async (url: string) => {
return {
results: [
{
value: `user1`,
displayName: `User1`,
},
{
value: `user2`,
displayName: `User2`,
},
{
value: `user3`,
displayName: `User3`,
},
],
};
};
const MyJQLEditor = () => {
const autocompleteProvider = useAutocompleteProvider(
"my-app",
getInitialData,
getSuggestions
);
const [query, setQuery] = useState<string>(`"user" in (user1, user2, user3)`);
const onUpdate = useCallback((jql: string) => {
setQuery(jql);
}, []);
const onSearch = useCallback((jql: string) => {
// Do some action on search
}, []);
return (
<div>
<button
onClick={() => {
setQuery(`"user" in (user1, user2, user3)`);
}}
>
Reset
</button>
<JQLEditor
analyticsSource={"my-app"}
query={query}
onUpdate={onUpdate}
onSearch={onSearch}
autocompleteProvider={autocompleteProvider}
locale={"en"}
enableRichInlineNodes={true}
onHydrate={async (jql: string) => {
return {
user: [
{
type: "user",
id: "user1",
name: "User1",
avatarUrl:
"https://lh3.googleusercontent.com/a/ACg8ocLWtffEyTpLLscynj5qsU_ZgbRZBWet07WGg8K7B5REGV07QQ=s96-c",
},
{
type: "user",
id: "user2",
name: "User2",
avatarUrl:
"https://lh3.googleusercontent.com/a/ACg8ocLWtffEyTpLLscynj5qsU_ZgbRZBWet07WGg8K7B5REGV07QQ=s96-c",
},
{
type: "user",
id: "user3",
name: "user3",
avatarUrl:
"https://lh3.googleusercontent.com/a/ACg8ocLWtffEyTpLLscynj5qsU_ZgbRZBWet07WGg8K7B5REGV07QQ=s96-c",
},
],
};
}}
/>
</div>
);
};
export default MyJQLEditor;
packages version:
“@atlaskit/jql-editor”: “^4.5.2”,
“@atlaskit/jql-editor-autocomplete-rest”: “^2.0.1”,
“react”: “^18.3.1”,
“react-dom”: “^18.3.1”,
“react-router-dom”: “^6.26.1”,
“react-scripts”: “5.0.1”,
“typescript”: “^4.4.2”,
Images:
it will display rich-inline-node when you refresh the page or paste the user value or reset the query.
I want it to display rich-inline-node after choosing user in the editor aswell. Thank you so much
.