Syntax Highlighting turned OFF once after adding custom auto completion list

v6
1

Hi,

I am using codemirror for my sql editor and using sql from ‘@codemirror/lang-sql’
When I don’t give any custom auto complete list I am able to see the keywords getting highlighted but after I give my custom list that’s not highlighting in different color.

const startState = EditorState.create({
      doc: docContent,
      extensions: [
        placeholder(
          'Your metric definition(SQL) comes here, you need not include table, group or split. 
           eg:countDistinct(field_name)',
        ),
        basicSetup,
        wordToolTip,
        autocompletion({
          // override: [myAutoCompletionList],
        }),
        sql(),
        EditorView.updateListener.of(update => {
          if (update.docChanged) {
            onChange && onChange(update.state);
          }
        }),

In the above code I have commented my autocomplete list, if I uncomment I am not syntax highlighting, Can you please suggest any reason behind this or I am doing anything wrong in giving the list?

2

Can you create a self-contained script at codemirror.net/try that displays this problem?

3

Hi I have tried the same in the below link, but I could not add the autocomplete I don’t understand the reason may be because I use v6 , but my structure and everything looks the same, I am trying to create a syntax highlighting for the Click house sql queries, I also want to add the myCustomCompletion list to keyword so that it will also be part of the syntax highlighting.

https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwfSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge0VkaXRvclZpZXcsaG92ZXJUb29sdGlwLH0gZnJvbSAnQGNvZGVtaXJyb3Ivdmlldyc7CmltcG9ydCB7IHNxbCB9IGZyb20gJ0Bjb2RlbWlycm9yL2xhbmctc3FsJzsKCmNvbnN0IG15Q3VzdG9tQ29tcGxldGlvbiA9ICBbCiAgewogICAgICAgICJsYWJlbCI6ICJzZWxlY3QiLAogICAgICAgICJ0eXBlIjogImtleXdvcmQiLAogICAgICAgICJhcHBseSI6ICJzZWxlY3QgdGFibGVfbmFtZSIsCiAgICAgICAgImRldGFpbCI6ICJzZWxlY3QgdGhlIHRhYmxlIiwKICAgICAgICAidmFsdWUiOiAic2VsZWN0IgogICAgfSwKICAKICB7CiAgICAgICAgImxhYmVsIjogIkNvdW50IiwKICAgICAgICAidHlwZSI6ICJrZXl3b3JkIiwKICAgICAgICAiYXBwbHkiOiAiY291bnQoZmllbGQpIiwKICAgICAgICAiZGV0YWlsIjogIkNvdW50cyBudW1iZXIgb2Ygbm9uLW51bGwgdmFsdWVzIGluIHRoZSBmaWVsZCIsCiAgICAgICAgInZhbHVlIjogImNvdW50IgogICAgfSwKICAgIHsKICAgICAgICAibGFiZWwiOiAiQ291bnQgRGlzdGluY3QiLAogICAgICAgICJ0eXBlIjogImtleXdvcmQiLAogICAgICAgICJhcHBseSI6ICJjb3VudERpc3RpbmN0KGZpZWxkKSIsCiAgICAgICAgImRldGFpbCI6ICJDb3VudHMgdGhlIGRpc3RpbmN0IG51bWJlciBvZiBub24tbnVsbCB2YWx1ZXMgaW4gdGhlIGZpZWxkIiwKICAgICAgICAidmFsdWUiOiAiY291bnREaXN0aW5jdCIKICAgIH0sCiAgICB7CiAgICAgICAgImxhYmVsIjogIlN1bSIsCiAgICAgICAgInR5cGUiOiAia2V5d29yZCIsCiAgICAgICAgImFwcGx5IjogInN1bShmaWVsZCkiLAogICAgICAgICJkZXRhaWwiOiAiU3VtIG9mIGFsbCB0aGUgdmFsdWVzIiwKICAgICAgICAidmFsdWUiOiAic3VtIgogICAgfSwKICAgIHsKICAgICAgICAibGFiZWwiOiAiQXZnIiwKICAgICAgICAidHlwZSI6ICJrZXl3b3JkIiwKICAgICAgICAiYXBwbHkiOiAiYXZnKGZpZWxkKSIsCiAgICAgICAgImRldGFpbCI6ICJBdmVyYWdlIG9mIHRoZSBmaWVsZCIsCiAgICAgICAgInZhbHVlIjogImF2ZyIKICAgIH0sCiAgICBdCgoKICBjb25zdCB3b3JkVG9vbFRpcCA9IGhvdmVyVG9vbHRpcCgodmlldywgcG9zLCBzaWRlKSA9PiB7CiAgICBsZXQgeyBmcm9tLCB0bywgdGV4dCB9ID0gdmlldy5zdGF0ZS5kb2MubGluZUF0KHBvcyk7CiAgICBsZXQgc3RhcnQgPSBwb3MsCiAgICAgIGVuZCA9IHBvczsKICAgIHdoaWxlIChzdGFydCA+IGZyb20gJiYgL1x3Ly50ZXN0KHRleHRbc3RhcnQgLSBmcm9tIC0gMV0pKSBzdGFydC0tOwogICAgd2hpbGUgKGVuZCA8IHRvICYmIC9cdy8udGVzdCh0ZXh0W2VuZCAtIGZyb21dKSkgZW5kKys7CiAgICBpZiAoKHN0YXJ0ID09IHBvcyAmJiBzaWRlIDwgMCkgfHwgKGVuZCA9PSBwb3MgJiYgc2lkZSA+IDApKSByZXR1cm4gbnVsbDsKICAgIGxldCB3b3JkID0gdGV4dC5zbGljZShzdGFydCAtIGZyb20sIGVuZCAtIGZyb20pOwogICAgbGV0IHJlcXVpcmVkX2RldGFpbCA9IG15Q3VzdG9tQ29tcGxldGlvbi5maWx0ZXIoZmllbGQgPT4gZmllbGQudmFsdWUgPT09IHdvcmQpWzBdOwogICAgaWYgKHJlcXVpcmVkX2RldGFpbCkgewogICAgICByZXR1cm4gewogICAgICAgIHBvczogc3RhcnQsCiAgICAgICAgZW5kLAogICAgICAgIGFib3ZlOiBmYWxzZSwKICAgICAgICBjcmVhdGUodmlldykgewogICAgICAgICAgbGV0IGRvbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgICAgICAgZG9tLnN0eWxlLnBhZGRpbmcgPSAnM3B4JzsKICAgICAgICAgIGRvbS50ZXh0Q29udGVudCA9IHJlcXVpcmVkX2RldGFpbC5kZXRhaWw7CiAgICAgICAgICByZXR1cm4geyBkb20gfTsKICAgICAgICB9LAogICAgICB9OwogICAgfSBlbHNlIHsKICAgICAgcmV0dXJuIG51bGw7CiAgICB9CiAgfSk7Cgphc3luYyBmdW5jdGlvbiBteUF1dG9Db21wbGV0aW9uTGlzdChjb250ZXh0KXsKICAgIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHsKICAgICAgbGV0IHdvcmQgPSBjb250ZXh0Lm1hdGNoQmVmb3JlKC9cdyovKTsKICAgICAgaWYgKHdvcmQgJiYgd29yZC5mcm9tID09IHdvcmQudG8gJiYgIWNvbnRleHQuZXhwbGljaXQpIHsKICAgICAgICByZXNvbHZlKG51bGwpOwogICAgICB9IGVsc2UgewogICAgICAgIGNvbnN0IGNvbXBsZXRpb25zID0gbXlDdXN0b21Db21wbGV0aW9uCiAgICAgICAgcmVzb2x2ZSh7IGZyb206IHdvcmQgPyB3b3JkLmZyb20gOiAwLCBvcHRpb25zOiBjb21wbGV0aW9ucyB9KTsKICAgICAgfQogICAgfSk7CiAgfQoKLy8gVGhlIE1hcmtkb3duIHBhcnNlciB3aWxsIGR5bmFtaWNhbGx5IGxvYWQgcGFyc2VycwovLyBmb3IgY29kZSBibG9ja3MsIHVzaW5nIEBjb2RlbWlycm9yL2xhbmd1YWdlLWRhdGEgdG8KLy8gbG9vayB1cCB0aGUgYXBwcm9wcmlhdGUgZHluYW1pYyBpbXBvcnQuCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogInNlbGVjdCIsCiAgZXh0ZW5zaW9uczogWwogICAgYmFzaWNTZXR1cCwKICAgIHNxbCgpLAogICAgd29yZFRvb2xUaXAKICAgIC8vIGF1dG9jb21wbGV0aW9uKHsKICAgIC8vICAgb3ZlcnJpZGU6IFtteUF1dG9Db21wbGV0aW9uTGlzdF0sCiAgICAvLyB9KQogIF0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5Cn0pCg==