Closed arthurmmedeiros closed 2 years ago
you can refer to the example lang-package to create a extensions
for yourself.
@arthurmmedeiros Below are a few examples you can refer to:
I appreciate the quick response @jaywcjlove
I took a look at the lang-package example and it seems like https://codemirror.net/6/docs/ref/#stream-parser is the way to go.
That requires creating an extension like you mentioned and passing a function token(stream, state)
to it. I guess that's where I'll have to control the component.
I see that if I return the name of a tag then it will highlight the string. However, it checks the entire string, so I can't keep the keywords highlighted.
const lang = StreamLanguage.define({
token: (stream: StringStream, state: boolean) => {
if (stream.string === 'test') {
stream.skipToEnd();
return 'keyword';
}
stream.next();
return null;
},
tokenTable: {
Name: tags.keyword
}
});
Is there a way to keep the keywords highlighted after moving to the next chars?
@arthurmmedeiros You need to look at the official documentation, I have no experience with this.
I think I found a way to output what I needed. I'll post here in case anyone is interested:
const allowedKeywords = [
'Name',
'LastName',
'Date'
];
const getAllowedKeywordsExpr = () => new RegExp(`\\[\\b(?:${allowedKeywords.map(p => p).join('|')})\\b\\]`);
const lang = StreamLanguage.define({
token: (stream: StringStream, state: any) => {
if (stream.match(getAllowedKeywordsExpr())) {
return 'keyword';
}
stream.next();
return null;
}
});
@arthurmmedeiros Can you share the code for custom keywords? Thanks!
Hey,
I've trying to use react-codemirror to build a very simple text editor with some custom keywords. I basically want to let the user define a naming convention for downloaded files. The user should be able to type free text and use some pre-defined tags that would be converted in a file name later.
It'd be something like this: [Name]-[LastName]-[DateCreated]-professional.pdf
[Name], [LastName], and [DateCreated] would be keywords that are highlighted in the text area when used.
I can't manage to build a custom language using stream parser though. I went through the docs but I can't still make it work.
Any tips on things I could try here?
Thanks a lot!!