Migration v5 showhint method for xml language in Angular

v6
1

Hi!
I have been searching the way to migrate the next code to version 6, but I could not find a correct solution:

  extraKeys: {
     "Ctrl-Space": (cm) => {
         CodeMirror.showHint(cm, CodeMirror.hint.xml, { schemaInfo: this.tags });
        }
    }

I want to show specific options depending of node or its attributes. An example of the schema that i’m using is the shown below:

{
    'nodeName': {
      attrs: {
        attributte1: null, 
        attributte2: [value1, value2]
      }
    },
   ...
}

For the moment I’m using legacy mode, because it has all the styles and lint that I need. I use CodeMirror for some very basic tasks.

   import { StreamLanguage } from '@codemirror/language';
   import { xml as x } from '@codemirror/legacy-modes/mode/xml';
   import { EditorState } from '@codemirror/state';
   import { EditorView } from '@codemirror/view';
   import { basicSetup } from 'codemirror';

    const state = EditorState.create({
      doc: content || '',
      extensions: [
        StreamLanguage.define(x),
        basicSetup
      ]
    })
    this.myCodeMirror = new EditorView({
      parent: document.getElementById('codemirror'),
      state
    });

I will greatly appreciate any kind of guide and help.

Thank you!

2

Don’t. @codemirror/lang-xml support schema-driven completions.

3

Hi! Thanks for your answer! The problem i had with lang-xml is that i could not made work the “lint” for a, for example, broke nodes and it is in the legacy mode. do i have some way to do that lint with lang-xml?

About the schema-driven completions, do you have some example code? i search it but i could not find anything

4

I finally managed to get the autocomplete working, thank you so much. I will show the code in case it can help someone:

const elements: ElementSpec[] = [
      {
        name: 'name',
        attributes: [
          {
            name: 'attrib1',
            values: null
          },
          {
            name: 'attrib2',
            values: ['value1', 'value2']
          }
        ]
    }
  ];
    const state = EditorState.create({
      doc: this.htmlFile?.content || '',
      extensions: [
        xml({elements}),
        basicSetup
      ]
    })
    this.myCodeMirror = new EditorView({
      parent: document.getElementById('codemirror'),
      state
    });

My problem now is the “lint” i will attach the two different behaviors, between legacy mode and current lang-xml.

legacy_xml_mode
legacy_xml_mode718×126 12.8 KB

lang-xml
lang-xml816×154 15 KB

In the first screenshot, with legacy mode, you can see how the error appears in red. In the second screenshot using lang-xml, everything remains the same despite the same error. Can I have the same behavior in lang-xml as in legacy?

Again, I will greatly appreciate any kind of guide and help.

Thank you!

5

Indeed, the new parser will work differently on invalid input. That isn’t something you can configure or change.